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