0.0.6 • Published 1 year ago
uzp-toggle-switch v0.0.6
A modern, minimal, clean, and customizable toggle-switch component for React
- Easy to Use - Start using right away!
- Customizable - Easy to customize size, color, speed, and more.
Installation
npm install uzp-toggle-switchUsage
import React from "react";
import { ToggleSwitch } from "uzp-toggle-switch";
const Example = () => {
const handleChange = () => {
console.log("do something");
};
return (
<div className="App">
<ToggleSwitch onToggle={handleChange} />
</div>
);
};API
| Prop | Type | Default | Description |
|---|---|---|---|
| onToggle | function | Required | The function passed to this prop will be execuded when users toggle the button. |
| isChecked | bool | false | If this value is true, toggle will be on initially. |
| size | string | "80px" | The height of the toggle. The width is calculated automatically based on the height. |
| onColor | string | "#25c625" | The backgroud color of the toggle button when it is switched on. |
| offColor | string | "#ffffff" | The backgroud color of the toggle button when it is switched off. |
| handleColor | string | "#ffffff" | The color of the circular handle. |
| speed | string | "0.3s" | The speed of the handle when it travels from the toggle on position to the toggle off position. |
Example usage of the all available props
import React from "react";
import { ToggleSwitch } from "uzp-toggle-switch";
const Example = () => {
const handleChange = () => {
console.log("do something");
};
return (
<div className="App">
<ToggleSwitch
onToggle={toggle}
size="80px"
onColor="green"
offColor="#f70a0a"
handleColor="white"
speed="0.3s"
/>
</div>
);
};