flexible-switch-react

‌

‌

Flexible switch for React

Flexible switch react is a flexible and customizable switcher component for React that supports a rich set of options for styling and interactive control. Suitable for implementing dark/light themes, state switches, and other interactions. Also supports adding icons or symbols.

Installation

npm install flexible-switch-react

Usage

A basic implementation looks as follows:

import {Switcher} from 'flexible-switch-react';

const [isActive, setIsActive] = useState(false);

<Switcher isActive={isActive} setIsActive={setIsActive} />

Example of adding an icon:

import { MdDarkMode } from "react-icons/md";

<Switcher 
    isActive={isActive} 
    setIsActive={setIsActive} 

    iconThumbLeft={<MdDarkMode/>}
/>

API

Prop	Type	Default	Description
isActive	bool	Required	If false, the switch is set to the left. If true, it is set to the right.
setIsActive	func	Required	Invoked Called when the user clicks the toggle.
sizeSwitch	string	100px	The size of the switch must be entered in pixels in string format.
backgroundSwitchLeft	string	'rgba(255, 255, 255, 0.500)'	Switch background when thumb is on the left.
backgroundSwitchRight	string	'white'	Switch background when thumb is on the left.
textColorSwitchLeft	string	'black'	Text color when thumb is on the left.
textColorSwitchRight	string	'black'	Text color when thumb is on the right.
BoxShadowSwitcherLeft	string	''	Allows you to add a shadow from the switch when the thumb is on the left. For example 'box-shadow: 0 0 5px white'
BoxShadowSwitcherRight	string	''	Allows you to add a shadow from the switch when the thumb is on the right. For example 'box-shadow: 0 0 5px black'
textSwitchLeft	string	''	Allows you to add text (up to two characters) to the switch on the left.
textSwitchRight	string	''	Allows you to add text (up to two characters) to the switch on the right.
iconSwitchLeft	React.ReactElement	undefined	Allows you to add an icon to the switch as a react component on the left.
iconSwitchRight	React.ReactElement	undefined	Allows you to add an icon to the switch as a react component on the right.
backgroundThumbLeft	string	'rgb(83, 124, 82)'	Adds a background to the thumb when it is on the left. accessibility.
backgroundThumbRight	string	'rgb(5, 159, 3)'	Adds a background to the thumb when it is on the right.
textColorThumbLeft	string	'black'	Adds text color when the thumb is on the left.
textColorThumbRight	string	'black'	Adds text color when the thumb is on the right.
BoxShadowThumbLeft	string	''	Adds a shadow from the thumb when it is on the left. For example 'box-shadow: 0 0 5px white'
BoxShadowThumbRight	string	''	Adds a shadow from the thumb when it is on the right. For example 'box-shadow: 0 0 5px black'
textThumbLeft	string	''	Allows you to add text (up to two characters) to the thumb when it is on the left.
textThumbRight	string	''	Allows you to add text (up to two characters) to the thumb when it is on the right.
iconThumbLeft	React.ReactElement	undefined	Allows you to add an icon to the thumb as a react component when it is on the left.
iconThumbRight	React.ReactElement	undefined	Allows you to add an icon to the thumb as a react component when it is on the right.
speedSwitch	string	'all 500ms linear'	Sets the speed of change for the switch.
speedThumb	string	'all 500ms linear'	Sets the speed of change for the thumb.

---