Grid component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Grid component for React using CSS grid and flex.

https://www.npmjs.com/package/library-grid-component

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 (
        <GridComponent
            gridData={gridData}
            gridItemMinWidth="100"
            gridItemLayout="1x1"
            gridItemColour="#262626"
            gridItemFill="#ffffff"
            gridItemShadow={true}
            gridItemBorder={false}
            gridItemBorderRadius="5"
            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 https://adobe.ly/2HkE1SZ

Leave a Reply

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