Demos available here: http://bvaughn.github.io/react-virtualized/
Install react-virtualized using npm.
npm install react-virtualized --saveES6, CommonJS, and UMD builds are available with each distribution. For example:
// Make sure to import default styles.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';
// Then you can import any react-virtualized components you need.
// Tree-shaking is supported with ES6 or CommonJS usage.
import { Grid } from 'react-virtualized'Alternately you can load a global-friendly UMD build:
<link rel="stylesheet" href="path-to-react-virtualized/styles.css">
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>React Virtualized has very few dependencies and most are managed by NPM automatically.
However the following peer dependencies must be specified by your project in order to avoid version conflicts:
react,
react-addons-shallow-compare, and
react-dom.
NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.
API documentation available here.
There are also a couple of how-to guides:
- Customizing classes and styles
- Displaying items in reverse order
- Using AutoSizer
- Creating an infinite-loading list
- Displaying a reverse list
Examples for each component can be seen in the documentation.
Here are some online demos of each component:
- ArrowKeyStepper
- AutoSizer
- CellMeasurer
- Collection
- ColumnSizer
- FlexTable
- Grid
- InfiniteLoader
- ScrollSync
- VirtualScroll
And here are some "recipe" type demos:
Use GitHub issues for requests.
I actively welcome pull requests; learn how to contribute.
Changes are tracked in the changelog.
react-virtualized is available under the MIT License.