react-checkbox-duet

react checkbox component for multi-selecting or single one


Keywords
react, reactjs, checkbox
License
MIT
Install
npm install react-checkbox-duet@1.0.0

Documentation

react-checkbox-duet

inspired from react-radio-group and react-checkbox-group

DEMO

  • use react-checkbox-duet in multi-select or binary-choice way
  • In onChange function, you can retrieve the true data, not event object.
  • focus on the DOM and data-binding
  • means no style-dependency(css) so you can do whatever you want

Usage

you can use the lib like this for multi-select checkboxs

import { Checkbox, CheckboxGroup } from 'react-checkbox-duet'

const options = {
  onChange,
  checkedList,
  name,
}

<CheckboxGroup {...options} >
  <Checkbox value={'McCartney'} />
  <Checkbox value={'Lennon'} />
  <Checkbox value={'Harrison'} />
  <Checkbox value={'Starr'} />
</CheckboxGroup>

or, you can use like following code for binary-choice checkbox

import { Checkbox } from 'react-checkbox-duet'

const options = {
  onChange,
  name,
  checked: false  // if you don't set this argument, default checked state is false
}

// checked if you love the beatles
<Checkbox
  {...options}
  value={'fan'}
  inGroup={false} // set this to use Checkbox alone
/>  

Install

npm install --save react-checkbox-duet

Properties

Multi-selecting

CheckboxGroup

Properties Type Default Required
name string false
checkedList array [] false
onChange function false
  • name: child input name
  • checkedList: default checked input values
  • onChange:
onChange(nextCheckedList){
  doSomeForCheckedList(checkedList)
}

Checkbox

Properties Type Default Required
value string(number, bool) false
inGroup bool true unnecessary to set

inGroup must be true when multi-select scenario

  • value: input value for identification

Binary Choice

Checkbox

Properties Type Default Required
value string false
name string false
checked bool false false
onChange function false
inGroup bool true must set to make it work for binary-choice

inGroup must be false when binary-choice scenario

  • value: input value for identification
  • name: input name for your purpose
  • checked: input default checked
  • onChange:
onChange(nextChecked){ // nextChecked will be opposite of the input checked before triggering the event
  doSomeForChecked(nextChecked)
}

License

MIT