README

React Grid Layout Component

npm

This component allow to display a simple fixed grid layout on front of your react app.

screen

Dependencies

React (>=16.8)

How to use

Install package:

$ yarn add react-grid-layout-component

$ 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

Licence

MIT

Usage no npm install needed!