react-easy-otp/dist/index.esm.js

A lightweight and customizable OTP input component built with React and no dependencies.

import e,{useRef as t,useEffect as n}from"react";var r="otp-module_each_otp_input__msNId";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".otp-module_each_otp_input__msNId{\r\n    width: var(--reo-width, 40px);\r\n    height: var(--reo-width, 40px);\r\n    text-align: var(--reo-center, 40px);\r\n    font-size: var(--reo-fontSize, 18px);\r\n    border: 1px solid #ccc;\r\n    border-radius: var(--reo-radius, 4px);\r\n}\r\n.otp-module_each_otp_input__msNId:focus{\r\n   outline: none;\r\n    box-shadow: 5px 8px 14px -4px #0003;\r\n}");var o=function(o){var a=o.value,c=void 0===a?"":a,i=o.onChange,u=void 0===i?function(){}:i,d=o.numInputs,p=void 0===d?4:d,l=o.separator,s=void 0===l?"-":l,m=o.errorText,f=void 0===m?"":m,v=o.className,x=void 0===v?"":v,h=o.placeholder,y=void 0===h?"-":h,_=t([]);n((function(){_.current[0]&&_.current[0].focus()}),[]);var g=function(e,t){var n=c.split("");n[t]=e.slice(-1);var r=n.join("");u(r),e&&_.current[t+1]&&_.current[t+1].focus()};return e.createElement("div",null,e.createElement("div",{style:{display:"flex",justifyContent:"center",gap:"8px"}},Array(p).fill("").map((function(t,n){return e.createElement(e.Fragment,{key:n},e.createElement("input",{ref:function(e){return _.current[n]=e},type:"text",maxLength:1,value:c[n]||"",onChange:function(e){return g(e.target.value,n)},onKeyDown:function(e){return function(e,t){"Backspace"===e.key&&!c[t]&&_.current[t-1]&&_.current[t-1].focus()}(e,n)},className:"".concat(x," ").concat(r),placeholder:y}),n<p-1&&e.createElement("span",{style:{margin:"0 4px"}},s))}))),f&&e.createElement("div",{style:{color:"red",marginTop:"8px",fontSize:"14px"}},f))};export{o as default};
//# sourceMappingURL=index.esm.js.map