List component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

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 *