Draggable Toggle Switch Component in React

A draggable, accessible, and customizable toggle switch component for React.js applications.

Installation:

# NPM
$ npm install react-switch --save

How to use it:

1. Import the switch component.

import React, { Component } from "react";
import Switch from "react-switch";

2. Create a switch component with basic styling.

class SwitchExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(checked) {
    this.setState({ checked });
  }
  render() {
    return (
      <label>
        <Switch onChange={this.handleChange} checked={this.state.checked} />
      </label>
    );
  }
}

3. Default component props.

disabled: false,
offColor: "#888",
onColor: "#080",
offHandleColor: "#fff",
onHandleColor: "#fff",
uncheckedIcon: defaultUncheckedIcon,
checkedIcon: defaultCheckedIcon,
boxShadow: null,
activeBoxShadow: "0 0 2px 3px #3bf",
height: 28,
width: 56

Preview:

Download Details:

Author: markusenglund

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/markusenglund/react-switch

License: MIT