Switch is a visual toggle between two mutually exclusive states — on and off.
npm install react-js-switchnpm install react-js-switch
jsx
//...
import Switch from 'react-js-switch';
export default function App() {
const [isSwitchOn, setIsSwitchOn] = useState(true);
const switch_onChange_handle = () => {
setIsSwitchOn(!isSwitchOn);
//...
};
return (
//...
//...
);
}
`
Props
$3
- Value of the switch, true means 'on', false means 'off'.
$3
- Value of the switch on the first render, true means 'on', false means 'off'.
- Note: this prop will be overwritten by the value prop.
$3
- The size of the switch in pixels.
- Default Value 40
$3
- Switch On/Off animation duration in ms.
- Default Value 250
$3
- Switch On/Off animation timing function.
- Check easings.net to learn more.
- Default Value easeOutExpo
- If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.
`javascript
function easeInQuad(x) {
return x * x;
}
`
$3
- Custom color for switch circle button.
- Default Value #fff
$3
- Switch container background color when it's on or off.
- Default Value { on: '#fc3f7f', off: '#f9f9f9' }
$3
- Switch container border color when it's on or off.
- Default Value { on: '#fc3f7f', off: '#e6e6e6' }
$3
- Disable toggling the switch.
- Default Value false
$3
- Callback called with the new value when it changes.
- Takes a parameter represents switch state, this parameter will return null if the switch value` linked to a state.