toggleButton.js

import React, { Component, PropTypes } from 'react';

const TOGGLE_BUTTON_SELECTOR = "toggle-button"
const TOGGLE_LABEL_SELECTOR = "toggle-label"
const DEFAULT_LABEL_TEXT = "Label Text"
const DEFAULT_BUTTON_LEFT_TEXT = "Button Left"
const DEFAULT_BUTTON_RIGHT_TEXT = "Button Right"

class ToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = { toggleOn: this.props.toggleOn ? this.props.toggleOn : false }
    this.handleClick = () => this._handleClick();
  }

  _handleClick() {
    this.setState({ toggleOn: !this.state.toggleOn })
  }

  render () {
    const buttonText = this.props.buttonText
    return (
      <div onClick={this.handleClick} disabled={this.props.disabled}>
        <label className={TOGGLE_LABEL_SELECTOR}>{ this.props.labelText || DEFAULT_LABEL_TEXT }</label>
        <button className={TOGGLE_BUTTON_SELECTOR + "-left"}>{ buttonText ? buttonText.left : DEFAULT_BUTTON_LEFT_TEXT }</button>
        <button className={TOGGLE_BUTTON_SELECTOR + "-right"}>{ buttonText ? buttonText.right : DEFAULT_BUTTON_RIGHT_TEXT }</button>
      </div>
    );
  }
}

ToggleButton.PropTypes = {
  labelText: PropTypes.string,
  buttonText: PropTypes.object,
  toggleOn: PropTypes.bool,
  disabled: PropTypes.bool
};

export default ToggleButton;