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={(checkedItems) => this.setState({ checkedItems })} onCancel={ () => this.setState({ checkedItems: [] })} /> ) } }| Property | Type | Description |
|---|---|---|
| items | PropTypes.array | Items to choose from; can be an array of strings or an array of objects. |
| labelKey | PropTypes.string | Label key; defaults to 'label'. |
| valueKey | PropTypes.string | Value key; defaults to 'value'. |
| onOk | PropTypes.func | Callback called when the Ok button is clicked; takes the selected items as arguments. |
| onCancel | PropTypes.func | Callback called when the Cancel button is clicked. |
| onChange | PropTypes.func | Callback called when a checkbox is clicked. |
| rowHeight | PropTypes.number | Row height; defaults to 30 pixels. |
| hasButtons | PropTypes.bool | If the Ok and Cancel buttons are displayed; defaults to true |
| hasFilterBox | PropTypes.bool | If the text filter box is displayed; defaults to true |