Package Exports

react-checkbox-group

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-checkbox-group) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-checkbox-group

This is your average checkbox group:

<form>
  <input
    onChange="{handleFruitChange}"
    type="checkbox"
    name="fruit"
    value="apple"
  />Apple
  <input
    onChange="{handleFruitChange}"
    type="checkbox"
    name="fruit"
    value="orange"
  />Orange
  <input
    onChange="{handleFruitChange}"
    type="checkbox"
    name="fruit"
    value="watermelon"
  />Watermelon
</form>

Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array. See below for a complete example

Install

npm install react-checkbox-group

yarn add react-checkbox-group

Simply require/import it to use it:

import CheckboxGroup from 'react-checkbox-group'

Example

import React, { useState, useEffect } from 'react'
import CheckboxGroup from 'react-checkbox-group'

const Demo = () => {
  // Initialize the checked values
  const [fuits, setFruits] = useState<string[]>(['apple', 'watermelon'])

  useEffect(() => {
    const timer = setTimeout(() => {
      setFruits(['apple', 'orange'])
    }, 5000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <CheckboxGroup name="fruits" value={fruits} onChange={setFruits}>
      <label>
        <Checkbox value="apple" /> Apple
      </label>
      <label>
        <Checkbox value="orange" /> Orange
      </label>
      <label>
        <Checkbox value="watermelon" /> Watermelon
      </label>
    </CheckboxGroup>
  )
}

ReactDOM.render(<Demo />, document.body)

License

MIT.