@nixxquality/react-indeterminate-checkbox

A checkbox that acts as a regular checkbox, but it has an indeterminate state.

Usage

Short example

<IndeterminateCheckbox
  status={ "Indeterminate" | "Unchecked" | "Checked" }
  onChange={ e => console.log("New status: " + e.status) }
  disabled={ this.supportsRegularInputAttributes === false }
/>

JavaScript example (View on CodeSandbox)

import React from 'react';
import ReactDOM from 'react-dom';

import { IndeterminateCheckbox } from "@nixxquality/react-indeterminate-checkbox";

class Usage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkbox: "Indeterminate"
    };

    this.updateCheckbox = this.updateCheckbox.bind(this);
  };
  
  render() {
    // The IndeterminateCheckbox supports all the props that your everyday input element does!
    return <div>
      <label>
        Super cool checkbox:
        <IndeterminateCheckbox
          name="checkbox"
          status={ this.state.checkbox }
          onChange={ this.updateCheckbox }
        />
      </label>
      <p>Status: { this.state.checkbox } ...checked: { this.state.checkbox === "Checked" ? "Yep" : "Nope" }</p>
    </div>
  };

  updateCheckbox(e) {
    // The IndeterminateChangeEvent is just a React.ChangeEvent<HTMLInputElement> augmented with an extra field!
    const stateUpdate = {};
    stateUpdate[e.target.name] = e.status; // .status is the extra field - and it's the new checkbox state.
    this.setState(stateUpdate);
  };
};

ReactDOM.render(<Usage />, document.getElementById("root"));

TypeScript example (View on CodeSandbox)

import React from 'react';
import ReactDOM from 'react-dom';

import { IndeterminateStatus, IndeterminateCheckbox, IndeterminateChangeEvent } from "@nixxquality/react-indeterminate-checkbox";

// IndeterminateStatus is available as a typesafe enum for the status variable
// IndeterminateChangeEvent is available as an extension of the React.ChangeEvent<HTMLInputElement>
// And of course, IndeterminateCheckbox is also typesafe as an extension of the input element

interface State {
  [key: string]: IndeterminateStatus;
};

export class Usage extends React.Component<{}, State> {
  public readonly state = {
    checkbox: IndeterminateStatus.Indeterminate
  };

  public render() {
    return <div>
      <label>
        Super cool checkbox:
        <IndeterminateCheckbox
          name="checkbox"
          status={ this.state.checkbox }
          onChange={ this.updateCheckbox }
        />
        <p>Status: { this.state.checkbox } ...checked: { this.state.checkbox === IndeterminateStatus.Checked ? "Yep" : "Nope" }</p>
      </label>
    </div>
  };

  private updateCheckbox = (e: IndeterminateChangeEvent) => {
    this.setState({ [e.target.name]: e.status });
  };
};

ReactDOM.render(<Usage />, document.getElementById("root"));