Grid component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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 *