JSPM – react-virtuoso@0.6.0

Package Exports

react-virtuoso

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-virtuoso) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Virtuoso is a simple, easy to use React component made to render huge data lists. Out of the box, Virtuoso:

Handles variable sized items; no manual measurements or hard-coding of item heights;
Supports grouping with sticky group headers;
Automatically handles content resizing;
Can render footer at the end of the list;
Can pin the first N items to the top of the list.

To see live examples, check the website.

Get Started

Install the package in your React project:

npm install react-virtuoso

Or, if yarn is your thing:

yarn add react-virtuoso

Then, put the component somewhere in your tree:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'

const App = () => {
  return (
    <Virtuoso style={{ width: '200px', height: '400px' }} totalCount={200} item={index => <div>Item {index}</div>} />
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

The component accepts an optional footer render property, rendered at the bottom of the list. The footer can be used to host a "load more" button or an indicator that the user has reached the end of the list.

Check the footer, load more and endless scrolling examples for practical applications of the footer.

Pinned Items

The component accepts an optional topItems property, that specifies how many of the items to keep "pinned" at the top of the list.

Check the fixed top items example for a live version of the above.

Grouping

The package exports two components - Virtuoso and GroupedVirtuoso. The Grouped component supports rendering sticky group headers at the beginning of each group.

Check the grouped numbers, grouped by first letter and groups with load on demand examples for working examples.

Documentation and Demos

For in-depth documentation and live examples of the supported features and live demos, check the website.

Author

Petyo Ivanov @petyosi

License

MIT License.

react-virtuoso