React Big List is smart wrapper component for handling large collections on client-side. It is higly generic and makes no assumptions about the underlying UI so it can be combined with virtualizing libraries like react-virtualized.

Full API documentation

• Sorting
• Query filtering
• Custom filters
• Pagination
• Persistance between remounts
• Internal caching 💥
• Responsiveness (no UI blocking) 💥

Sometimes backend API's doesn't support features like sorting/pagination/filtering. Implementing those operations on client side can lead to many edge-case errors which are easily overlooked. Moreover, performing those operations on huge collections is very expensive and may lead UI freezes and have sever impact on user experience. React Big List implements generic logic of generic logic of pagination, sorting, filtering and is thoroughly tested.

For examples of the react-big-list in action, go to https://Meemaw.github.io/react-big-list/.

OR

To run that demo on your own computer:

• Clone this repository
• npm install
• npm run storybook
• Visit http://localhost:6006/

Import ReactBigList in your React component:

import ReactBigList from 'react-big-list';

Use props provided by react-big-list to render your collection.

render() {
  return (
    <ReactBigList members={['React', 'Angular', 'Ember']} paginationProps={{ pageSize: 2 }}>
      {({
        displayedMembers,
        sortColumn,
        sortDirection,
        setSort,
        ...rest
      }) => <div>{`Members sorted by ${sortColumn} in ${sortDirection} direction.`}</div>}
    </ReactBigList>
  )
}

import { withBigListConfig } from 'react-big-list';

const MyBigList = withBigListConfig({
  pageSize: 10,
  queryStringFilter: (member, queryString) => member.name.length > queryString.length,
})(ListComponent);

export default MyBigList;

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-big-list

or:

yarn add react-big-list

yarn test

Thanks goes to these people (emoji key):

Matej 💬 💻 🎨 📖 💡 🤔 🚇 👀

This project follows the all-contributors specification. Contributions of any kind welcome!