React component to display large sets of data in a scroll container.
Usage
<Cluster className="cluster" height={100} rowHeight={50}> <span /> <span /> <span /> ... </Cluster>
The props types of the Cluster
component are:
type Props = { children: Array<ReactElement>, className: ?string, height: number, onIndexChange: ?Function, onScrollChange: ?Function, onScrollEnd: ?Function, rowHeight: number, };
There are 3 ways to hook into the component:
/** * Called when the row index has changed. * * @param index {Number} */ function onIndexChange(index) { } /** * Called when the cluster is scrolled. * * @param cluster {HTMLElement} */ function onScrollChange(cluster) { } /** * Called when the cluster is scrolled near the end. */ function onScrollEnd() { }
Installation
$ npm install
Development
To start the server:
$ npm start
Tests
To run all tests:
$ npm test
Or you can run the linters, unit tests and check for type errors individually:
$ npm run test:lint $ npm run test:unit $ npm run test:flow # or ./node_modules/.bin/flow
Contributing
Bug reports and pull requests are welcome on GitHub. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
License
_________________ < The MIT License > ----------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||