Un composant de commutateur à bascule déplaçable, accessible et personnalisable pour les applications React.js.
# NPM
$ npm install react-switch --save
1. Importez le composant du commutateur.
import React, { Component } from "react";
import Switch from "react-switch";
2. Créez un composant de commutateur avec un style de base.
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. Accessoires de composants par défaut.
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
Voir sur GitHub : https://github.com/markusenglund/react-switch