Skip to content

miguelramosfdz/react-virtualized-checkbox

 
 

Repository files navigation

React Virtualized Checkbox

react-virtualized-checkbox-demo

Getting started

Install react-virtualized-checkbox using npm.

npm install react-virtualized-checkbox --save

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

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 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3 }
      // 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.
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

About

Checkbox group component with virtualization for large number of options

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.3%
  • CSS 2.1%
  • HTML 0.6%