nicolerauch / react-three-state-checkbox

React component for checkbox that supports the indeterminate state conveniently.

react-three-state-checkbox

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

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.

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

Usage

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

import React, { Component } from 'react';
import Checkbox from 'react-three-state-checkbox';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      indeterminate: false
    };
  }

  handleChange = () => { ... };

  render() {
    const { checked, indeterminate } = this.state;
    return (
      <Checkbox
        checked={checked}
        indeterminate={indeterminate}
        onChange={this.handleChange}
      />
    );
  }
}

Props

Props	Type	Description
className	string?	Classname to be applied to the input element.
style	React.CSSProperties?	Inline styles to be passed to input element.
checked	boolean	Boolean value of checkbox's checked state.
indeterminate	boolean?	Boolean value of checkbox's indeterminate state.
disabled	boolean?	Boolean value of checkbox's disabled state.
onChange	() => {}?	Function called when value of checkbox changes.

Styling

There are no additional dom wrappers around the input component. The className prop styles the input element directly.

License

MIT Licensed. Copyright (c) Jonathan Chiam 2019.