React-checkbox-hook NPM

react-checkbox-hook

A React hook to easily work with checkboxes

Features

Controllable API
Headless (Bring-your-own-UI)
Checkboxes nesting
Support of indeterminate checkboxes
Small size and no dependencies

Install

yarn add react-checkbox-hook

npm install --save react-checkbox-hook

Quickstart

Learn more in example CodeSandbox

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 (
    <div>
      {options.map((option) => (
        <div key={option.id}>
          <label>
            <input
              type="checkbox"
              checked={selectedOptions.includes(option.id)}
              onChange={(e) => handleOptionChange(option, e.target.checked)}
            />
            {option.title}
          </label>
          <br />
        </div>
      ))}
    </div>
  )
}