react-big-list
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

React Big List

About

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

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:

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!

Package Sidebar

Install

npm i react-big-list

Weekly Downloads

1,662

Version

1.2.0

License

MIT

Unpacked Size

322 kB

Total Files

21

Last publish

Collaborators

  • meemaw