Never Play Matchmaker

    react-scrollable-list

    1.3.1 • Public • Published

    React Scrollable List

    npm version

    React Scrollable List is a scrollable, high-performance list component for rendering large lists of items with React. It's performance really shines when dealing with lists in excess of a thousand items, and scales well into the millions or more. Due to it only rendering a small slice of the list into the DOM at any time based on the scroll position, it removes most of the speed issues with web browsers and rendering very large amounts of DOM nodes at once.

    Demo

    jwarning.github.io/react-scrollable-list

    The component is generic and renders a simple component comprised of a div wrapper and div containers for each of the elements currently rendered.

    To style the elements you can simply refer to the .react-scrollable-list and the .react-scrollable-list-item classes. The list items need to be passed in via props in the following format:

    {
      id: 'a unique identifier',
      content: 'the content to display inside the div'
    }

    The content can alternatively also be another react component.

    The component takes up to four props:

    • listItems: an array of items in the format specified above
    • heightOfItem: the CSS height of each item (needs to be the same for each item)
    • maxItemsToRender: an optional number which tells the component how many components before and after the item scrolled to it should pre-render
    • style: an optional style object to add inline styling through JS
    <ReactScrollableList
      listItems=[...]
      heightOfItem={30}
      maxItemsToRender={50}
      style={{ color: '#333' }}
    />

    Notes

    To build a CommonJS version of this file simply run npm run build. A build is already included in the dist folder.

    License

    MIT

    Install

    npm i react-scrollable-list

    DownloadsWeekly Downloads

    345

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • jwarning