You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You pass react-virtualized-checkbox an array of items. Here's a simple example:
importReact,{Component}from'react'importVirtualizedCheckboxfrom'react-virtualized-checkbox'classMyCheckboxextendsComponent{constructor(props){super(props)this.state={}}render(){constitems=[{label: "One",value: 1,checked: true},{label: "Two",value: 2,checked: true},{label: "Three",value: 3,checked: true}// And so on...]return(<VirtualizedCheckboxitems={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