React-big-list NPM

About

React Big List is smart wrapper component for handling large collections on client-side.

Features

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.

Live Playground

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

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;