Awesome
React Virtualized Checkbox
Demo available here: http://emilebres.github.io/react-virtualized-checkbox/
Getting started
Install react-virtualized-checkbox
using npm.
npm install react-virtualized-checkbox --save
yarn add react-virtualized-checkbox
And in your code:
import VirtualizedCheckbox from 'react-virtualized-checkbox'
Simple Example
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, checked: true},
{ label: "Two", value: 2, checked: true},
{ label: "Three", value: 3, checked: true}
// And so on...
]
return (
<VirtualizedCheckbox
items={items}
onOk={(checkedItems) => this.setState({ checkedItems })}
onCancel={ () => this.setState({ checkedItems: [] })}
/>
)
}
}
React Virtualized Checkbox Props
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 an array of the selected items, a boolean if all items are selected and the text filter as arguments. |
onCancel | PropTypes.func | Callback called when the Cancel button is clicked. |
onChange | PropTypes.func | Callback called when a checkbox is clicked. If a normal checkbox is clicked, will return the item. If the (Select all) checkbox is clicked, will return an array of all filtered items. |
hasFilterBox | PropTypes.bool | If the text filter box is displayed; defaults to true |
hasOkButton | PropTypes.bool | If the Ok button is displayed; defaults to true |
hasCancelButton | PropTypes.bool | If the Cancel button is displayed; defaults to true |
labelKey | PropTypes.string | Label key; defaults to 'label'. |
rowHeight | PropTypes.number | Row height; defaults to 30 pixels. |
height | PropTypes.number | Component height; If not set, will get from the parent. |
width | PropTypes.number | Component width; If not set, will get from the parent. |