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