@taisuke-j/react-grid-view v0.0.7

React Grid View

npm i @taisuke-j/react-grid-view

Grid view of repeatable React components. Pass an array of data and a component as props, and it will render a grid view. There are also optional props for customization. Suggestions and pull requests for optimization are welcome.

Minimum settings

<Grid
  dataset={peopleData} // Array of data
  component={<PersonCard />} // Component
  columns={3} // Number of columns in a row
/>

With optional settings

<Grid
  dataset={peopleData} // Array of data
  component={<PersonCard />} // Component
  columns={3} // Number of columns in a row
  distance={10} // Distance between components in px values
  enhancer={enhancerFunc} // Function to process each component
/>

npm start to see an example (Node v10.15.1+).

It's a fixed grid

The number of columns in a row is specified as a prop, and it renders all columns with common height.

This library does not have any responsive settings built in. If you need to change the number of the columns depending on the viewport width, you probably want to trigger your own function that updates the columns prop, which represents the number of columns in a row.

Browser Support

It uses flexbox for CSS, which should be supported for most of the modern browsers.