@dlguswo333/react-simple-switch

react-simple-switch

react-simple-switch is a simple, lightweight react component you can toggle on and off.

github repository link: https://github.com/dlguswo333/react-simple-switch

npm link: https://www.npmjs.com/package/@dlguswo333/react-simple-switch

Preview

You can preview the component at github pages.

link: https://dlguswo333.github.io/react-simple-switch/

Features

The switch has the following features.

• You can toggle the switch on and off, and you can attach a callback function when the value changes.
• You can set its default value.
• You can set its width and height in pixel unit.
• You can set whether the switch needs to be disabled (unable to toggle the switch).
• You can set background color of the switch.

Also, in development manner, it has the following features.

• Lightweight. Total unpacked size weighs about 15KB.
• It has built-in types (typescript) support.
• It has jsDoc comments to ease your development.
• It supports the following Module Systems: ESM and CJS.

Notes

Theses are a few things that you need to note when you use the switch.

• Since it is built with the new JSX Transform, Make sure you use React 17 or later.

Props (Properties)

Property	Type	Default	Description
defaultValue	boolean	Required	Default boolean value of switch.
onChange	(value: boolean) => unknown	undefined	Callback function on change event. Return value has no effect.
width	number	60	Width of switch in pixel.
height	number	26	Height of switch in pixel.
disabled	boolean	false	Disabled property of switch. true will mark the switch disabled and the value of the switch cannot be changed while it is set to true.
onBackgroundColor	React.CSSProperties['backgroundColor']	undefined	Background color of switch in on state. If undefined, use default color defined in package css.
offBackgroundColor	React.CSSProperties['backgroundColor']	undefined	Background color of switch in off state. If undefined, use default color defined in package css.

Version History

v0.2.0

• Support vertical switch
• Support custom background colors
• Fix (remove) CSS transition effect on slider when editing width or height

v0.1.2

• README update

v0.1.1

• README update

v0.1.0

• Initial version