rcg

react-checkbox-group

Sensible checkbox groups manipulation for DOM.

Showing:

Popularity

Downloads/wk

9.5K

GitHub Stars

110

Maintenance

Last Commit

2yrs ago

Contributors

12

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

React Checkbox

Readme

React-checkbox-group

Greenkeeper badge Build Status

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

or

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 [fruits, setFruits] = useState<string[]>(['apple', 'watermelon'])

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

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

  return (
    <CheckboxGroup name="fruits" value={fruits} onChange={setFruits}>
      {(Checkbox) => (
        <>
          <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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial