react-toggly
Version:
A highly customizable and themeable toggle switch component for React, built with TypeScript and styled-components. Supports multiple themes like iOS, Bootstrap, and Tailwind CSS, and allows for custom icons, accessibility features, and controlled/uncontr
1 lines • 4.02 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React from 'react';\r\nimport { ToggleProps } from './types';\r\n\r\nconst Toggle: React.FC<ToggleProps> = ({\r\n isChecked,\r\n defaultIsChecked = false,\r\n onToggleChange,\r\n onToggleFocus,\r\n onToggleBlur,\r\n inputName,\r\n inputValue,\r\n inputId,\r\n customIcons,\r\n ariaLabelledBy,\r\n ariaLabel,\r\n isDisabled,\r\n containerClassName,\r\n toggleTheme = 'ios',\r\n leftLabel,\r\n rightLabel,\r\n}) => {\r\n const isControlled = isChecked !== undefined;\r\n const [internalChecked, setInternalChecked] = React.useState(defaultIsChecked);\r\n\r\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n if (isDisabled) return;\r\n if (!isControlled) {\r\n setInternalChecked(e.target.checked);\r\n }\r\n onToggleChange?.(e);\r\n };\r\n\r\n const isToggleChecked = isControlled ? isChecked : internalChecked;\r\n\r\n return (\r\n <div className={`react-toggly-container ${containerClassName || ''}`}>\r\n {/* Left label (text or icon) */}\r\n {leftLabel && <span className=\"react-toggly__left-label\">{leftLabel}</span>}\r\n\r\n {/* Toggle switch */}\r\n <label\r\n className={`react-toggly__wrapper react-toggly__wrapper--${toggleTheme} ${\r\n isDisabled ? 'react-toggly__wrapper--disabled' : ''\r\n }`}\r\n >\r\n <input\r\n type=\"checkbox\"\r\n className=\"react-toggly__input\"\r\n checked={isToggleChecked}\r\n onChange={handleChange}\r\n onFocus={onToggleFocus}\r\n onBlur={onToggleBlur}\r\n name={inputName}\r\n value={inputValue}\r\n id={inputId}\r\n aria-labelledby={ariaLabelledBy}\r\n aria-label={ariaLabel}\r\n disabled={isDisabled}\r\n />\r\n <span className=\"react-toggly__slider\">\r\n {customIcons?.checked && isToggleChecked && (\r\n <div className=\"react-toggly__icon-wrapper react-toggly__checked-icon\">\r\n {customIcons.checked}\r\n </div>\r\n )}\r\n {customIcons?.unchecked && !isToggleChecked && (\r\n <div className=\"react-toggly__icon-wrapper react-toggly__unchecked-icon\">\r\n {customIcons.unchecked}\r\n </div>\r\n )}\r\n </span>\r\n </label>\r\n\r\n {/* Right label (text or icon) */}\r\n {rightLabel && <span className=\"react-toggly__right-label\">{rightLabel}</span>}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Toggle;"],"names":["isChecked","defaultIsChecked","onToggleChange","onToggleFocus","onToggleBlur","inputName","inputValue","inputId","customIcons","ariaLabelledBy","ariaLabel","isDisabled","containerClassName","toggleTheme","leftLabel","rightLabel","isControlled","undefined","internalChecked","setInternalChecked","React","useState","isToggleChecked","_jsxs","className","children","_jsx","jsxs","type","checked","onChange","e","target","onFocus","onBlur","name","value","id","disabled","jsx","unchecked"],"mappings":"0IAGsC,EACpCA,YACAC,oBAAmB,EACnBC,iBACAC,gBACAC,eACAC,YACAC,aACAC,UACAC,cACAC,iBACAC,YACAC,aACAC,qBACAC,cAAc,MACdC,YACAC,iBAEA,MAAMC,OAA6BC,IAAdjB,GACdkB,EAAiBC,GAAsBC,EAAMC,SAASpB,GAUvDqB,EAAkBN,EAAehB,EAAYkB,EAEnD,OACEK,OAAA,MAAA,CAAKC,UAAW,0BAA0BZ,GAAsB,KAAIa,SAAA,CAEjEX,GAAaY,EAAAA,YAAMF,UAAU,2BAA0BC,SAAEX,IAG1DS,EAAAI,KAAA,QAAA,CACEH,UAAW,gDAAgDX,KACzDF,EAAa,kCAAoC,KACjDc,SAAA,CAEFC,MACE,QAAA,CAAAE,KAAK,WACLJ,UAAU,sBACVK,QAASP,EACTQ,SAzBcC,IAChBpB,IACCK,GACHG,EAAmBY,EAAEC,OAAOH,SAE9B3B,IAAiB6B,GAAE,EAqBbE,QAAS9B,EACT+B,OAAQ9B,EACR+B,KAAM9B,EACN+B,MAAO9B,EACP+B,GAAI9B,EACa,kBAAAE,EACL,aAAAC,EACZ4B,SAAU3B,IAEZY,eAAMC,UAAU,uBAAsBC,SAAA,CACnCjB,GAAaqB,SAAWP,GACvBI,EAAKa,IAAA,MAAA,CAAAf,UAAU,wDACZC,SAAAjB,EAAYqB,UAGhBrB,GAAagC,YAAclB,GAC1BI,EAAAA,IAAA,MAAA,CAAKF,UAAU,0DAAyDC,SACrEjB,EAAYgC,kBAOpBzB,GAAcW,EAAAA,IAAM,OAAA,CAAAF,UAAU,4BAA6BC,SAAAV,MACxD"}