react-input-switch

React toggle switch component

Installation

npm install react-input-switch --save
yarn add react-input-switch

Custom styles

<Switch
  styles={{
    track: checked => ({
      backgroundColor: checked ? 'red' : 'blue'
    }),
    button: checked => ({
      backgroundColor: checked ? 'blue' : 'yellow'
    })
  }}
/>

Also <Switch className="switch" /> will render:

<label className="switch">
  <span className="switch-track" />
  <span className="switch-button" />
</label>

Controlled example

import Switch from 'react-input-switch';

class App extends React.Component {
  state = { value: 0 };

  render() {
    return (
      <Switch
        value={this.state.value}
        onChange={value => this.setState({ value })}
      />
    );
  }
}

Custom on/off value

The default on/off value is 1/0 and default value is 1. This component will also render a hidden input with current value and the name prop.

import Switch from 'react-input-switch';

class App extends React.Component {
  state = { value: 'yes' };

  render() {
    return (
      <>
        <Switch
          value={this.state.value}
          on="yes"
          off="no"
          onChange={value => this.setState({ value })}
        />
        {this.state.value}
      </>
    );
  }
}

License

MIT