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
