React Big List

About

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

Features

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

Why

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.

Live Playground

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/

Usage

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>
  )
}

As HOC

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

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

export default MyBigList;

Installation

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

Testing

yarn test

Contributors

Thanks goes to these people (emoji key):

Matej 💬 💻 🎨 📖 💡 🤔 🚇 👀

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