Grid component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Grid component for React using CSS grid and flex.

Install and save component as a dependency

npm install --save library-grid-component

Import component into your app

import Grid from 'library-grid-component'

Create an array of objects with the key being data

const gridData = [
    { data: 'Item' },
    { data: 'Item' },
    { data: 'Item' }

Render the component with the object array we created as well as any other props that are needed.

render () {
    const gridData = [
        { data: 'Item' },
        { data: 'Item' },
        { data: 'Item' }

    return (
            gridItemAlignment="center" />

Prop Values
gridItems Object
gridItemMinWidth Min width for each item
gridItemLayout 1×1, 2×1, 3×1, 4×1
gridItemColour HEX colour code
gridItemFill HEX colour code
gridItemShadow true or false
gridItemBorder true or false
gridItemBorderColour HEX colour code
gridItemBorderRadius Pixels
gridItemAlignment left, right, center

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon

Leave a Reply

Your email address will not be published. Required fields are marked *