Demo available here: http://emilebres.github.io/react-virtualized-checkbox/
Install react-virtualized-checkbox using npm.
npm install react-virtualized-checkbox --saveES6, CommonJS, and UMD builds are available with each distribution. For example:
import VirtualizedCheckbox from 'react-virtualized-checkbox'Alternately you can load a global-friendly UMD build:
<script src="path-to-react-virtualized-checkbox/dist/umd/react-virtualized-checkbox.js"></script>You pass react-virtualized-checkbox an array of items. Here's a simple example:
import React, { Component } from 'react' import VirtualizedCheckbox from 'react-virtualized-checkbox' class MyCheckbox extends Component { constructor (props) { super(props) this.state = {} } render () { const items = [ { label: "One", value: 1 }, { label: "Two", value: 2 }, { label: "Three", value: 3 } // And so on... ] return ( <VirtualizedCheckbox items={items} onOK={(checkedOptions) => this.setState({ checkedOptions })} onCancel={ () => this.setState({ checkedOptions: [] })} /> ) } }| Property | Type | Description |
|---|---|---|
| items | PropTypes.array | Items to choose from; can be an array of strings or an array of objects. |
| onOk | PropTypes.func | Callback called when the Ok button is clicked; takes the selected option labels as arguments. |
| onCancel | PropTypes.func | Callback called when the Cancel is clicked. |
The additional parameters introduced by react-virtualized-checkbox are optional. They are:
| Property | Type | Description |
|---|---|---|
| optionHeight | PropTypes.number | Option height; defaults to 30 pixels. |
| labelKey | PropTypes.string | Label key; defaults to 'label'. |
| valueKey | PropTypes.string | Value key; defaults to 'value'. |