List component for React [NPM Package]

Reading Time: 1

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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" />
        )
    }
    
    
    Prop Values
    listData Object
    listStyleType default, circle, decimal, alpha, roman
    listAlign left, right, center
    listInline true or false
    subListStyleType default, 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 *