React component for checkbox that supports the indeterminate state conveniently. This component is TypeScript compatible.
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'
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 | 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. |
There are no additional dom wrappers around the input component. The className
prop styles the input
element directly.
MIT Licensed. Copyright (c) Jonathan Chiam 2019.