You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Switch component based on native checkbox input, using CSS variables (custom properties) as much as possible. Easily customisable and super lightweight.
I wanted a solid, beautiful Switch component, with absolutly minimal footprint.
I did not want to install a full components-lib, even if I would be using only a single component, I wanted it to be really lightweight
but also highly customizable, and CSS variables are perfect for this, since they are much better than pre-compiled variabled, since they
are computed on-the-fly, the CSS itself if kept to a minimum, when wanted to create different design versions of the Switch component.
Install:
npm i @yaireo/ui-switch
Usage
importSwitchfrom'@yaireo/ui-switch'import'@yaireo/ui-switch/src/switch.scss'// or the pre-compiled CSS:// import '@yaireo/ui-switch/dist/switch.css'
// use in JSX:<form><Switchchecked={checked}onChange={onSwitchChange}/><SwitchtextRight>Label on the right</Switch><Switchdisabledchecked>Disabled</Switch><Switchindeterminate>Indeterminate</Switch><Switchstyle={{'--size':'12px','--thumb-scale':2.2,'thumb-color-on':'green'}}>Inline styles</Switch></form>
Compile source:
> npm install
> gulp
About
React Switch component based on native checkbox input, using CSS variables (custom properties) as much as possible. Easily customisable and super lightweight.