react-cluster

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 |                 ||     ||