Awesome-react-toggles NPM

Features

Customizable styles and toggle duration. ✅
Support onToggle callback. 🔄
In-built multiple toggle switch variants. (in-progress) 🚀

Installation

npm install awesome-react-toggles

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"