React component to display large sets of data in a scroll container
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
lib
test
.babelrc
.eslintrc.json
.flowconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
package.json
webpack.build.config.js
webpack.config.js

README.md

react-cluster npm version Build Status

React component to display large sets of data in a scroll container.

react-cluster

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