react-otp-custom/dist/index.umd.js

Customizable React OTP input component

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".otp-container{display:flex;gap:8px}.otp-input{width:40px;height:40px;font-size:20px;text-align:center;border:1px solid #ccc;border-radius:4px}.otp-square{border-radius:4px}.otp-circle{border-radius:50%}.otp-light:focus{border-color:#000;outline:none}.otp-dark{background-color:#000!important;color:#fff!important;border:1px solid white}.otp-dark:focus{border:2px solid whitesmoke;outline:none}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
(function(n,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],a):(n=typeof globalThis<"u"?globalThis:n||self,a(n.OtpInput={},n.jsxRuntime,n.React,n.PropTypes))})(this,function(n,a,l,p){"use strict";const h=({length:i=6,onChange:O,isNumeric:m=!0,theme:w="light",shape:g="square",fontSize:y=24})=>{const[u,d]=l.useState(Array(i).fill("")),f=l.useRef([]);l.useEffect(()=>{O(u.join(""))},[u,O]);const j=(s,e)=>{var c;const t=s.target.value;if(m&&!/^\d*$/.test(t))return;const r=[...u],o=t.slice(-1);r[e]=o,d(r),o&&u[e]===""&&e<i-1&&((c=f.current[e+1])==null||c.focus())},v=(s,e)=>{var t,r,o;if(s.key==="Backspace"){const c=[...u];u[e]?(c[e]="",d(c)):e>0&&((t=f.current[e-1])==null||t.focus())}else s.key==="ArrowLeft"&&e>0?(r=f.current[e-1])==null||r.focus():s.key==="ArrowRight"&&e<i-1&&((o=f.current[e+1])==null||o.focus())},$=s=>{var r;s.preventDefault();const e=s.clipboardData.getData("text").slice(0,i).split(""),t=[...u];e.forEach((o,c)=>{m&&!/^[0-9]$/.test(o)||(t[c]=o)}),d(t),(r=f.current[e.length-1])==null||r.focus()};return a.jsx("div",{className:"otp-container",onPaste:$,children:u.map((s,e)=>a.jsx("input",{ref:t=>f.current[e]=t,type:"text",inputMode:m?"numeric":"text",autoFocus:e===0,maxLength:2,value:s,onChange:t=>j(t,e),onKeyDown:t=>v(t,e),className:`otp-input otp-${w} otp-${g}`,style:{fontSize:`${y}px`,width:`${y*2}px`,height:`${y*2}px`}},e))})};h.propTypes={length:p.number,onChange:p.func.isRequired,isNumeric:p.bool,theme:p.string,shape:p.oneOf(["square","circle"]),fontSize:p.number},n.OtpInput=h,n.default=h,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});