2.0.0 • Published 2 years ago
awesome-react-toggles
Licence
MIT
Version
2.0.0
Deps
0
Size
129 kB
Vulns
0
Weekly
0
Awesome React Toggles
A collection of react components to render cool toggle switches
Features • Installation • Usage • Props • Report a bug
Features
- Customizable styles and toggle duration.
- Support onToggle callback.
- In-built multiple toggle switch variants. (in-progress)
Installation
npm install awesome-react-togglesOR
yarn add awesome-react-togglesUsage
import { ToggleDefault } from "awesome-react-toggles";
const App = (props: any): JSX.Element => {
const handleToggle = () => {
console.log("Toggle works!")
}
return (
<ToggleDefault
size={5}
width={4}
onToggle={handleToggle}
/>
);
}Props
| name | description | type | default |
|---|---|---|---|
size |
Overall size of the entire toggle component. | number | 3.2 |
width |
Width of the toggle component. | number | 2 |
onToggle |
Callback funtion for when the switch is toggled on or off. | () => void | undefined |
isToggled |
Sets the switch's toggled state on or off based on the given value. | boolean | undefined |
buttonShadow |
Button's box shadow. | string (must be a valid CSS box-shadow value) | "rgba(0, 0, 0, 0.35) 0px 5px 15px" |
backgroundShadow |
Background's box shadow. | string (must be a valid CSS box-shadow value) | "rgba(50, 50, 93, 0.25) 0px 15px 30px -15px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset" |
outlineOnFocus |
Whether the toggle component is outlined when focused or not. | boolean | true |
outlineColor |
Color of the outline. | string (must be a valid CSS color value) | "gray" |
outlineWidth |
Width of the outline. | string (must be a number followed by a valid CSS unit) | "1px" |
transitionDuration |
Duration of the transition of the switch from off to on and vice versa. | string (must be a number followed by a valid CSS unit) | "200ms" |
bgColorChecked |
Background color when the switch is toggled on | string (must be a valid CSS color value) | "#4cda64" |
bgColorUnchecked |
Background color when the switch is toggled off | string (must be a valid CSS color value) | "#dbdbdb" |
Report a bug
If you found a bug in this library, please file a GitHub issue here.