https://github.com/rostyk-begey/react-checkbox-hook

A React hook to easily work with checkboxes tree state
https://github.com/rostyk-begey/react-checkbox-hook

checkbox front-end react react-hooks

Last synced: 6 months ago
JSON representation

A React hook to easily work with checkboxes tree state

• Host: GitHub
• URL: https://github.com/rostyk-begey/react-checkbox-hook
• Owner: rostyk-begey
• Created: 2022-03-05T22:51:48.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-01-24T22:11:01.000Z (over 1 year ago)
• Last Synced: 2024-03-24T15:03:55.190Z (over 1 year ago)
• Topics: checkbox, front-end, react, react-hooks
• Language: TypeScript
• Homepage: https://rostyk-begey.github.io/react-checkbox-hook/
• Size: 806 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# react-checkbox-hook

[![NPM](https://img.shields.io/npm/v/react-checkbox-hook.svg)](https://www.npmjs.com/package/react-checkbox-hook)

[![CI](https://github.com/rostyk-begey/react-checkbox-hook/actions/workflows/ci.yml/badge.svg)](https://github.com/neet/react-checkbox-hook/actions/workflows/ci.yml)

[![codecov](https://codecov.io/gh/neet/react-checkbox-hook/branch/main/graph/badge.svg?token=TH4BNCOPMB)](https://codecov.io/gh/neet/react-checkbox-hook)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> 

> A React hook to easily work with checkboxes



  Example |

  Demo



### Features

- Controllable API

- Headless (Bring-your-own-UI)

- Checkboxes nesting

- Support of indeterminate checkboxes

- [Small size](https://bundlephobia.com/result?p=react-checkbox-hook@latest) and no [dependencies](./package.json)

## Install

```bash

yarn add react-checkbox-hook

```

```bash

npm install --save react-checkbox-hook

```

## Quickstart

Learn more in [example](https://github.com/rostyk-begey/react-checkbox-hook/tree/master/example) 


[CodeSandbox](https://codesandbox.io/s/react-checkbox-hook-fc4x90)

```tsx

import React from 'react';

import { useCheckbox } from 'react-checkbox-hook';

const App = () => {

  const options = [

    { id: 0, title: 'Option 1' },

    { id: 1, title: 'Option 2' },

    { id: 2, title: 'Option 3' },

  ];

  const { selectedOptions, handleOptionChange } = useCheckbox({ options });

  return (

    


      {options.map((option) => (

        


          

             handleOptionChange(option, e.target.checked)}

            />

            {option.title}

          

          


        

      ))}

    

  )

}

```


## License

MIT © [rostyk-begey](https://github.com/rostyk-begey)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).