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.32 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react");exports.default=({isChecked:c,defaultIsChecked:l=!1,onToggleChange:r,onToggleFocus:t,onToggleBlur:s,inputName:i,inputValue:n,inputId:o,customIcons:g,ariaLabelledBy:d,ariaLabel:u,isDisabled:_,containerClassName:h,toggleTheme:p="ios",leftLabel:y,rightLabel:b})=>{const m=void 0!==c,[x,k]=a.useState(l),j=m?c:x;return e.jsxs("div",{className:`react-toggly-container ${h||""}`,children:[y&&e.jsx("span",{className:"react-toggly__left-label",children:y}),e.jsxs("label",{className:`react-toggly__wrapper react-toggly__wrapper--${p} ${_?"react-toggly__wrapper--disabled":""}`,children:[e.jsx("input",{type:"checkbox",className:"react-toggly__input",checked:j,onChange:e=>{_||(m||k(e.target.checked),r?.(e))},onFocus:t,onBlur:s,name:i,value:n,id:o,"aria-labelledby":d,"aria-label":u,disabled:_}),e.jsxs("span",{className:"react-toggly__slider",children:[g?.checked&&j&&e.jsx("div",{className:"react-toggly__icon-wrapper react-toggly__checked-icon",children:g.checked}),g?.unchecked&&!j&&e.jsx("div",{className:"react-toggly__icon-wrapper react-toggly__unchecked-icon",children:g.unchecked})]})]}),b&&e.jsx("span",{className:"react-toggly__right-label",children:b})]})};
//# sourceMappingURL=index.cjs.map