Installation
npm install react-input-switch --save
yarn add react-input-switch
Default
Off
Custom styles
<Switch
styles={{
track: checked => ({
backgroundColor: checked ? 'red' : 'blue'
}),
button: checked => ({
backgroundColor: checked ? 'blue' : 'yellow'
})
}}
/>
Also <Switch className="switch" /> will render:
<label className="switch">
<span className="switch-track" />
<span className="switch-button" />
</label>
Controlled example
0
function App() {
const [value, setValue] = useState(0);
return (
<Fragment>
{value}
<Switch value={value} onChange={setValue} />
</Fragment>
);
}
Custom on/off value
The default on/off value is 1/0 and default value is 1. This component will also render a hidden input with current value and the name prop.
yes
function App() {
const [value, setValue] = useState('yes');
return (
<Fragment>
{value}
<Switch on="yes" off="no" value={value} onChange={setValue} />
</Fragment>
);
}
License
MIT