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.