beecode-otp-ui/dist/index.js

OTP Frontend UI

import e,{useState as r,useRef as t,useEffect as n,useCallback as o}from"react";import{clsx as c}from"clsx";import{twMerge as a}from"tailwind-merge";function u(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return a(c(e))}"function"==typeof SuppressedError&&SuppressedError;var i=function(c){var a=c.otpFieldCount,i=void 0===a?4:a,l=c.handleOTPVerification,f=c.error,s=c.className,p=r(Array(i).fill("")),m=p[0],v=p[1],y=t([]);n((function(){if(m.every((function(e){return""!==e}))){var e=m.join("");null==l||l(e)}}),[m,l]);var d=function(e,r){v((function(t){var n=function(e,r,t){if(t||2===arguments.length)for(var n,o=0,c=r.length;o<c;o++)!n&&o in r||(n||(n=Array.prototype.slice.call(r,0,o)),n[o]=r[o]);return e.concat(n||Array.prototype.slice.call(r))}([],t,!0);return n[r]=e,n}))},x=o((function(e,r){var t=e.target.value;d(t,r),""!=t&&r<i-1&&y.current[r+1].focus()}),[i]);return e.createElement("div",{className:u("text-center flex flex-col justify-center items-center",s)},e.createElement("div",{className:"flex space-x-4"},Array(i).fill("").map((function(r,t){return e.createElement("input",{key:t,ref:function(e){return y.current[t]=e},onChange:function(e){return x(e,t)},className:"w-[40px] h-[40px] p-2 outline-none border border-slate-400 focus:border-green-500",type:"text",maxLength:1,inputMode:"numeric",onKeyDown:function(e){return function(e,r){if("ArrowRight"===e.key||"ArrowLeft"===e.key){var t=(r+("ArrowRight"===e.key?1:i-1))%i;y.current[t].focus()}"Backspace"===e.key&&""!==y.current[r].value&&(e.preventDefault(),y.current[r].value="",d("",r),r>0&&y.current[r-1].focus())}(e,t)}})}))),e.createElement("span",{className:"text-red-600"},f))};export{i as OTPUI};