https://github.com/ziad-saab/react-checkbox-group

Sensible checkbox groups manipulation for DOM.
https://github.com/ziad-saab/react-checkbox-group

checkbox javascript react

Last synced: about 1 year ago
JSON representation

Sensible checkbox groups manipulation for DOM.

• Host: GitHub
• URL: https://github.com/ziad-saab/react-checkbox-group
• Owner: ziad-saab
• Created: 2014-08-13T17:10:48.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2020-06-02T22:17:31.000Z (about 6 years ago)
• Last Synced: 2025-03-29T22:07:51.029Z (about 1 year ago)
• Topics: checkbox, javascript, react
• Language: TypeScript
• Size: 3.18 MB
• Stars: 107
• Watchers: 3
• Forks: 54
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [React](http://facebook.github.io/react/)-checkbox-group

[![Greenkeeper badge](https://badges.greenkeeper.io/ziad-saab/react-checkbox-group.svg)](https://greenkeeper.io/)

[![Build Status](https://travis-ci.org/ziad-saab/react-checkbox-group.svg?branch=master)](https://travis-ci.org/ziad-saab/react-checkbox-group)

This is your average checkbox group:

```html

  Apple

  Orange

  Watermelon

```

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](#example)

## Install

```sh

npm install react-checkbox-group

```

or

```sh

yarn add react-checkbox-group

```

Simply require/import it to use it:

```tsx

import CheckboxGroup from 'react-checkbox-group'

```

## Example

```tsx

import React, { useState, useEffect } from 'react'

import CheckboxGroup from 'react-checkbox-group'

const Demo = () => {

  // Initialize the checked values

  const [fruits, setFruits] = useState(['apple', 'watermelon'])

  useEffect(() => {

    const timer = setTimeout(() => {

      setFruits(['apple', 'orange'])

    }, 5000)

    return () => clearTimeout(timer)

  }, [])

  return (

    

      {(Checkbox) => (

        <>

          

             Apple

          

          

             Orange

          

          

             Watermelon

          

        >

      )}

    

  )

}

ReactDOM.render(, document.body)

```

## License

MIT.