Skip to content
React toggle switch component
Branch: master
Clone or download
Latest commit cbccace May 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src sync May 15, 2019
.gitignore sync Dec 1, 2018
.travis.yml sync Dec 1, 2018
LICENSE Initial commit Jun 17, 2015
README.md sync May 16, 2019
babel.config.js sync May 15, 2019
jest.setup.js sync Dec 1, 2018
package.json sync May 24, 2019
rollup.config.js sync Dec 1, 2018
yarn.lock sync May 24, 2019

README.md

react-input-switch

npm npm Build Status codecov styled with prettier

React toggle switch component

Installation

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

Demo

https://swiftcarrot.dev/react-input-switch/

Custom styles

<Switch
  styles={{
    track: {
      backgroundColor: 'blue'
    },
    trackChecked: {
      backgroundColor: 'red'
    },
    button: {
      backgroundColor: 'yellow'
    },
    buttonChecked: {
      backgroundColor: 'blue'
    }
  }}
/>

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

You can’t perform that action at this time.