5.0.2 • Published 6 years ago

react-checkbox-group v5.0.2

Weekly downloads
11,944
License
MIT
Repository
github
Last release
6 years ago

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.

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.0.1

7 years ago

3.3.4

8 years ago

3.3.3

8 years ago

4.0.0

8 years ago

3.3.2

8 years ago

4.0.0-beta

8 years ago

3.3.1

8 years ago

3.3.0

8 years ago

3.2.0

8 years ago

3.1.1

8 years ago

3.1.0

8 years ago

3.0.1

9 years ago

3.0.0

9 years ago

1.0.4

9 years ago

1.0.3

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.3.2

9 years ago

0.3.1

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.9

10 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

11 years ago

0.1.4

11 years ago

0.1.3

11 years ago

0.1.2

11 years ago

0.1.1

11 years ago

0.1.0

11 years ago