Skip to content

emilebres/react-virtualized-checkbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Virtualized Checkbox

react-virtualized-checkbox-demo

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.

About

Checkbox group component with virtualization for large number of options

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published