README
React Grid Layout Component
This component allow to display a simple fixed grid layout on front of your react app.
Dependencies
How to use
- Install package:
$ yarn add react-grid-layout-component
or
$ npm i react-grid-layout-component
- Import
<GridLayout />
component on the project root component:
import {GridLayout} from 'react-grid-layout-component/lib/GridLayout';
export const AppRoot = () => {
return (
<div>
<GridLayout />
</div>
);
};
- GridLayout tsx component contains default props, you can overwrite as you need:
props | type | description | default value |
---|---|---|---|
columnsNumber | number | Number of columns | 12 |
gutterSize | number | Size of gutter between columns (px) | 20 |
color | string | Set custom column Grid | rgba(255, 0, 0, 0.14) |
maxWidth | number | Set a max width on the container | null |
example:
<GridLayout
columnsNumber={6}
gutterSize={10}
/>
NOTE: If you need to display a simple Grid Line Layout without gutter, set gutterSize props to 0.
Example
- Clone the repository
- Install dependencies and start dev server with one single command line:
$ yarn dev
Credit
© Willy Brauner
Licence
MIT