class IndeterminateCheckbox extends React.Component {

  componentDidMount() {

    if (this.props.indeterminate === true) {

      this._setIndeterminate(true);

    }

  }

​

  componentDidUpdate(previousProps) {

    this._setIndeterminate(this.props.indeterminate);

  }

​

  _setIndeterminate(indeterminate) {

    const node = React.findDOMNode(this);

    node.indeterminate = indeterminate;

  }

​

  render() {

    const { indeterminate, type, ...props } = this.props;

    return <input type="checkbox" {...props} />;

  }

}

​

​

class App extends React.Component {

  constructor() {

    super();

    this.toggleChecked = this.toggleChecked.bind(this);

    this.toggleIndeterminate = this.toggleIndeterminate.bind(this);

​

    this.state = {

      checked: false,

      indeterminate: false

    }

  }

​

  render() {

    return (

      <div>

        <div>

          <IndeterminateCheckbox

            checked={this.state.checked}

            indeterminate={this.state.indeterminate} />

        </div>

        <div>

          <button onClick={this.toggleChecked}>

            Checked: {String(this.state.checked)}

          </button>

          <button onClick={this.toggleIndeterminate}>

            Indeterminate: {String(this.state.indeterminate)}

          </button>

        </div>

      </div>

    );

  }

​

  toggleChecked() {

    this.setState(s => ({checked: !s.checked}));

  }

​

  toggleIndeterminate() {

    this.setState(s => ({indeterminate: !s.indeterminate}));

  }

}

​

React.render(<App />, document.getElementById("app"));