gridash
v0.0.9
Published
React component for a grid layout within fixed width / height
Downloads
5
Maintainers
Readme
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