node package manager

react-check3

react-check3

React Checkbox with 3 states

Install

$ npm install react-check3 --save

Usage

var Checkbox = require('react-check3')
var checked = null
 
React.render(
    <Checkbox checked={checked} />,
    document.body
)
 
//or
React.render(
    <Checkbox checked={checked}>
        Checkbox label
    </Checkbox>,
    document.body
)

Props

  • checked: Boolean/Null - whether the checkbox should be checked or not, or in indeterminate state. checked value should equal to the value of one of the following props: checkedValue, uncheckedValue, indeterminateValue
  • defaultChecked - uncontrolled version of checked

You can also use value/defaultValue instead of checked/defaultChecked

  • onChange: Function(value, event) - The function to call when the state of the checkbox changes. NOTE: Unlike <input type="checkbox" />, first param is the new value, and second param is the event object.
  • supportIndeterminate: Boolean - defaults to true. Specify false if you only want checked/unchecked states
  • checkedValue - Defaults to true
  • uncheckedValue - Defaults to false
  • indeterminateValue - Defaults to null
  • iconSize - defaults to 13
  • checkedIconSrc - A src for the img tag used to render the icon in checked state
  • uncheckedIconSrc - A src for the img tag used to render the icon in unchecked state
  • indeterminateIconSrc - A src for the img tag used to render the icon in indeterminate state
  • checkedSubmitValue - the value to submit with the form, when the checkbox is checked
  • uncheckedSubmitValue - the value to submit with the form, when the checkbox is unchecked
  • indeterminateSubmitValue - the value to submit with the form, when the checkbox is indeterminate
  • name: String - the name under which to submit the checkbox value
  • disabled
  • childrenAfter: Boolean - whether to render children after the checkbox or not. Defaults to true
  • shouldSubmit: Function(value, props) - decide whether the checkbox should be submitted or not.
  • nextValue: Function(oldValue, props) - can be used to change the default value order (when supportIndeterminate is true). Default order is: (checked -> unchecked; unchecked -> indeterminate; indeterminate -> checked)