1.0.0 • Published 7 years ago

mff-checkbox v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

mff-checkbox

Usage

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

import { Checkbox, CheckboxGroup } from 'mff-checkbox'

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 'mff-checkbox'

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

yarn add mff-checkbox

Properties

Multi-selecting

CheckboxGroup

PropertiesTypeDefaultRequired
namestringfalse
checkedListarray[]false
onChangefunctionfalse
  • name: child input name
  • checkedList: default checked input values
  • onChange:
onChange(nextCheckedList){
  doSomeForCheckedList(checkedList)
}

Checkbox

PropertiesTypeDefaultRequired
valuestring(number, bool)false
inGroupbooltrueunnecessary to set

inGroup must be true when multi-select scenario

  • value: input value for identification

Binary Choice

Checkbox

PropertiesTypeDefaultRequired
valuestringfalse
namestringfalse
checkedboolfalsefalse
onChangefunctionfalse
inGroupbooltruemust 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