react-animated-switch

A customizable toggle-switch component for React.

• Customizable - Greatly customizable using props and classes.
• It Just Works - Sensible default styling. Uses module css file which is automatically inserted to code, so no need to import a separate css file.

Installation

To use this package in your React project, you can install it using npm or yarn:

npm install --save react-animated-switch

or

yarn add react-animated-switch

Usage

import React, { useState } from "react"
import { Switch } from "react-animated-switch"

function App() {
  const [checked, setChecked] = useState<boolean>(false)

  const onChange = (value: boolean) => {
    setChecked(value)
  }

  return (
    <div>
      <Switch checked={checked} onChange={(value: boolean) => onChange(value)} />
    </div>
  )
}

export default App

API

Prop	Type	Default	Description
checked	bool	Required	If true, the switch is set to checked. If false, it is not checked.
onChange (value:boolean)	func	Required	Invoked when the user clicks the switch. It is passed one argument: value, which is a boolean that describes the presumed future state of the checked .
inActiveTrackColor	string	'#D3D3D3'	The switch track will take on this color when it is not checked. Only accepts hex-colors.
activeTrackColor	string	'#0097EB'	The switch track will take on this color when it is checked. Only accepts hex-colors.
inActiveThumbColor	string	'#FFFFFF'	The switch thumb will take on this color when it is not checked. Only accepts hex-colors.
activeThumbColor	string	'#FFFFFF'	The switch thumb will take on this color when it is checked. Only accepts hex-colors.
height	number	28	The height of the background of the switch, measured in pixels.
width	number	56	The width of the background of the switch, measured in pixels.
mainClassName	string	undefined	Set as the className of the outer shell of the switch. Useful for positioning the switch.
trackClassName	string	undefined	Set as the className of track of the switch.
thumbClassName	string	undefined	Set as the className of thumb of the switch.

---

NOTE: When passing className as prop you may have to use !important with css styling to overwrite the default styles

Contributors

Waseem Munir

License

MIT