gridash

React component for a grid layout within fixed width / height. Usefull for dashboards or full screen web applications.

Wraps css grid. No dependencies.

Example: https://codesandbox.io/s/gridash-2besv

(Ex: react-grid-dashboard)

Install

yarn add gridash

Usage

import React from 'react';

import Dashboard from 'gridash';

const Example = () => (
  <Dashboard
    columns={12}
    rows={12}
    layout={{
      idA: { x: 1, y: 1, w: 5, h: 5 },
      idB: { x: 1, y: 6, w: 5, h: 7 },
      idC: { x: 6, y: 1, w: 9, h: 12 },
    }}
    gap={10} // optional, string or number
  >
    <Dashboard.Item id='idA'>
      <div
        style={{
          padding: 10,
          background: 'LightSkyBlue',
          height: '100%',
        }}
      >
        Component A
      </div>
    </Dashboard.Item>
    <Dashboard.Item id='idB'>
      <div
        style={{
          padding: 10,
          background: 'LightGreen',
          height: '100%',
          overflowY: 'auto', // adds scrollable
        }}
      >
        {'Component B, scrollable; '.repeat(100)}
      </div>
    </Dashboard.Item>
    <Dashboard.Item id='idC'>
      <div
        style={{
          padding: 10,
          background: 'LightGray',
          height: '100%',
        }}
      >
        Component C
      </div>
    </Dashboard.Item>
  </Dashboard>
);

License

MIT © gilevskaya