react-js-switch

- Switch is a visual toggle between two mutually exclusive states — on and off.


Installation

npm install react-js-switch

Usage

``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.