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-toggles

OR

yarn add awesome-react-toggles

Usage

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.