Grid component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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 *