react-three-state-checkbox
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

react-three-state-checkbox

npm Codecov GitHub last commit license

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.

Package Sidebar

Install

npm i react-three-state-checkbox

Weekly Downloads

1,727

Version

3.0.0

License

MIT

Unpacked Size

8.14 kB

Total Files

9

Last publish

Collaborators

  • jchiam