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
3 lines (2 loc) • 1.53 kB
JavaScript
!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],a):(e="undefined"!=typeof globalThis?globalThis:e||self).reactToggly=a(e.ReactJSXRuntime,e.React)}(this,(function(e,a){"use strict";return({isChecked:c,defaultIsChecked:t=!1,onToggleChange:l,onToggleFocus:r,onToggleBlur:s,inputName:n,inputValue:i,inputId:o,customIcons:d,ariaLabelledBy:g,ariaLabel:u,isDisabled:h,containerClassName:p,toggleTheme:_="ios",leftLabel:y,rightLabel:m})=>{const b=void 0!==c,[f,x]=a.useState(t),j=b?c:f;return e.jsxs("div",{className:`react-toggly-container ${p||""}`,children:[y&&e.jsx("span",{className:"react-toggly__left-label",children:y}),e.jsxs("label",{className:`react-toggly__wrapper react-toggly__wrapper--${_} ${h?"react-toggly__wrapper--disabled":""}`,children:[e.jsx("input",{type:"checkbox",className:"react-toggly__input",checked:j,onChange:e=>{h||(b||x(e.target.checked),l?.(e))},onFocus:r,onBlur:s,name:n,value:i,id:o,"aria-labelledby":g,"aria-label":u,disabled:h}),e.jsxs("span",{className:"react-toggly__slider",children:[d?.checked&&j&&e.jsx("div",{className:"react-toggly__icon-wrapper react-toggly__checked-icon",children:d.checked}),d?.unchecked&&!j&&e.jsx("div",{className:"react-toggly__icon-wrapper react-toggly__unchecked-icon",children:d.unchecked})]})]}),m&&e.jsx("span",{className:"react-toggly__right-label",children:m})]})}}));
//# sourceMappingURL=index.umd.js.map