jchiam / 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.

react-three-state-checkbox's Issues

custom styling not available

Is there any way to style the checkbox.? I need to add custom style when the checkbox is in indeterminate state.?

Support inline styles

It'd be great to have the ability to pass styles down to the the component via the style property.

<Checkbox
  style={{ width: '10%' }}
  {...otherProps}
/>

name or id prop ?

Hi, I can't add a name or id property to the Checkbox component, so I can't determine WHICH three-state checkbox is being changed. I want the ability to have more than one three-state checkbox. Is there some other prop I can use besides name or id? Here's an example of what I want. This is React 18.

`
// set state ...

    const [tristate, setTristate] = useState({
        triState1: {
            checked: false,
            indeterminate: false,
        },
        triState2: {
            checked: false,
            indeterminate: false,
        },
    }) 

`
// change event handler ....

const handleChange = event => {
    const { name, value, checked, indeterminate, type } = e.target

    if(type=="checkbox"){
        return setTristate({ ...tristate,
            [name] : {
                indeterminate: indeterminate==true ? true : false,
                checked: checked==true ? true : false
        }})
    }
}

// multiple checkboxes, differentiated by NAME prop. ...

          <Checkbox
             name="triState1"
             checked={tristate.triState1.checked}
             indeterminate={tristate.triState1.indeterminate}
             onChange={e=>handleChange(e)}
         />

`

Component doesn't seem to work in IE11

In IE 11 browser, I see this error in console - SCRIPT1003: Expected ':'

Please let me know how to overcome this or if there is anything that can be done from your side.

Error install

get error when install
Exit code: 127 Command: is-ci || husky install

revert use of typescript target from es6 to es5

The typescript target in tsconfig.json has been increased from es5 to es6:

This lead to errors in minification process in create-react-app
cf:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
and also break the generated bundle to run on IE11
Can you please revert to target es5? Thanks

View config not found for name input error pops out when the program is run

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