List component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Technologies used: React, Bootstrap

    List component for React.

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

    Install and save component as a dependency

    npm install --save library-list-component

    Import component into your app

    import List from 'library-list-component'

    Create an array of objects with the key being data

    const listData = [
        {
            data: "Item one",
            content: [
                {
                    data: "Sub item one"
                }
            ]
        },
        {
            data: "Item two"
        },
        {
            data: "Item three"
        },
        {
            data: "Item four"
        },
        {
            data: "Item five"
        }
    ]

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

    render () {
        const listData = [
            {
                data: "Item one",
                content: [
                    {
                        data: "Sub item one"
                    }
                ]
            },
            {
                data: "Item two"
            },
            {
                data: "Item three"
            },
            {
                data: "Item four"
            },
            {
                data: "Item five"
            }
        ]
    
        return (
            <ListComponent 
                listData={listData}
                listStyleType="roman"
                listAlign="left"
                listInline={false}
                subListStyleType="default" />
        )
    }
    PropValues
    listDataObject
    listStyleTypedefault, circle, decimal, alpha, roman
    listAlignleft, right, center
    listInlinetrue or false
    subListStyleTypedefault, circle, decimal, alpha, roman

    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 *