react-easy-otp
Version:
A lightweight and customizable OTP input component built with React and no dependencies.
3 lines (2 loc) • 2.19 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);var n="otp-module_each_otp_input__msNId";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.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}");exports.default=function(t){var o=t.value,a=void 0===o?"":o,u=t.onChange,c=void 0===u?function(){}:u,i=t.numInputs,d=void 0===i?4:i,l=t.separator,p=void 0===l?"-":l,s=t.errorText,f=void 0===s?"":s,v=t.className,m=void 0===v?"":v,x=t.placeholder,h=void 0===x?"-":x,y=e.useRef([]);e.useEffect((function(){y.current[0]&&y.current[0].focus()}),[]);var _=function(e,t){var r=a.split("");r[t]=e.slice(-1);var n=r.join("");c(n),e&&y.current[t+1]&&y.current[t+1].focus()};return r.default.createElement("div",null,r.default.createElement("div",{style:{display:"flex",justifyContent:"center",gap:"8px"}},Array(d).fill("").map((function(e,t){return r.default.createElement(r.default.Fragment,{key:t},r.default.createElement("input",{ref:function(e){return y.current[t]=e},type:"text",maxLength:1,value:a[t]||"",onChange:function(e){return _(e.target.value,t)},onKeyDown:function(e){return function(e,t){"Backspace"===e.key&&!a[t]&&y.current[t-1]&&y.current[t-1].focus()}(e,t)},className:"".concat(m," ").concat(n),placeholder:h}),t<d-1&&r.default.createElement("span",{style:{margin:"0 4px"}},p))}))),f&&r.default.createElement("div",{style:{color:"red",marginTop:"8px",fontSize:"14px"}},f))};
//# sourceMappingURL=index.cjs.js.map