1.0.4 • Published 7 months ago
flexible-switch-react v1.0.4
Installation
npm install flexible-switch-reactUsage
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. |