4.0.1 • Published 2 months ago

react-three-state-checkbox

Licence

MIT

Version

4.0.1

Deps

Size

10 kB

Vulns

Weekly

Stars

Summary Dependency Versions

react-three-state-checkbox

React component for checkbox that supports the indeterminate state conveniently. This component is TypeScript compatible.

Compatibility

React 18 or 19
Node.js >= 22

Installation

The most straightforward way to use this component in your project is to either use npm or yarn.

# npm
npm i --save react-three-state-checkbox

# yarn
yarn add react-three-state-checkbox

Import in your project using the following.

// Default import
import Checkbox from 'react-three-state-checkbox'

// Named import
import { Checkbox } from 'react-three-state-checkbox'

Usage

This component is a wrapper around the default HTML input element.

import { useState } from 'react';
import Checkbox from 'react-three-state-checkbox';

export default function App() {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
    setIndeterminate(false);
  };

  return (
    <Checkbox
      checked={checked}
      indeterminate={indeterminate}
      onChange={handleChange}
    />
  );
}

Props

Props	Type	Description
checked	boolean	Boolean value of checkbox's checked state.
indeterminate	boolean?	Boolean value of checkbox's indeterminate state.
onChange	((e: ChangeEvent) => void)?	Function called when value of checkbox changes.

All other native <input> HTML attributes (id, name, className, style, disabled, aria-*, data-*, etc.) are forwarded directly to the underlying input element. The type and readOnly props are controlled by the component and cannot be overridden.