Description:
A draggable, customizable, accessible, and iOS-style toggle switch component for React.
Installation:
# NPM $ npm install react-switch --save
Usage:
Import the react-switch.
import React, { Component } from 'react';
import Switch from 'react-switch';Create a default toggle switch.
export default class BasicExample extends Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div className="example">
<h2>Simple usage</h2>
<label htmlFor="normal-switch">
<span>Switch with default style</span>
<Switch
onChange={this.handleChange}
checked={this.state.checked}
className="react-switch"
id="normal-switch"
/>
</label>
<p>The switch is <span>{this.state.checked ? 'on' : 'off'}</span>.</p>
</div>
);
}
}Default props.
disabled: false, offColor: '#888', onColor: '#080', offHandleColor: '#fff', onHandleColor: '#fff', handleDiameter: null, uncheckedIcon: defaultUncheckedIcon, checkedIcon: defaultCheckedIcon, boxShadow: null, activeBoxShadow: '0px 0px 2px 3px #33bbff', height: 28, width: 56, className: null, id: null, 'aria-labelledby': null, 'aria-label': null
Preview:
