react-switchery is a simple react component adopted from Switchery that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

npm install react-switchery --save

<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fjquery.switchery%2F0.8.1%2Fswitchery.min.css" />
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fjquery.switchery%2F0.8.1%2Fswitchery.min.js"></script>

<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fswitchery%2Fstandalone%2Fswitchery.css" />
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fnode_modules%2Fswitchery%2Fstandalone%2Fswitchery.js"></script>

Or download Switchery and include it in HTML in your own way.

The default value for the switch eg:true - Will keep the switch on false - Will keep the switch off Default: true

Sets the required class to true, (in case you need validation by your form) Default: false

The object of options provided by switchery. Refer switchery for options Default: { color : '#64bd63' , secondaryColor : '#dfdfdf' , jackColor : '#fff' , jackSecondaryColor: null , className : 'switchery' , disabled : false , disabledOpacity : 0.5 , speed : '0.1s' , size : 'default' }

The function that is called when the user switches the state of the switch. You will get the boolean value of the state changed. Default: none

The CSS class name for the container div of the switch component Default: none

The label for the switch component Default: none

import React from 'react';
import Switch from 'react-switchery';

class ComponentWithSwitch extends React.Component {

  onChange(value) {
    console.log(value);
  }

  render() {
    return(
      <Switch
        className="switch-class"
        onChange={this.onChange}
        options={
          {
            color: '#474F79',
            size: 'small'
          }
        }
        checked
      />
    );
  }
}

export default ComponentWithSwitch;

MIT