Grid component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Technologies used: React

    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" />
        )
    }
    PropValues
    gridItemsObject
    gridItemMinWidthMin width for each item
    gridItemLayout1×1, 2×1, 3×1, 4×1
    gridItemColourHEX colour code
    gridItemFillHEX colour code
    gridItemShadowtrue or false
    gridItemBordertrue or false
    gridItemBorderColourHEX colour code
    gridItemBorderRadiusPixels
    gridItemAlignmentleft, 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 *