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

Styling

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

GitHub