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

A customizable OTP input validator for React

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).otpValidatorReact=t(e.react)}(this,function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function r(e){var t={exports:{}};return e(t,t.exports),t.exports}var o="function"==typeof Symbol&&Symbol.for,a=o?Symbol.for("react.element"):60103,i=o?Symbol.for("react.portal"):60106,c=o?Symbol.for("react.fragment"):60107,u=o?Symbol.for("react.strict_mode"):60108,f=o?Symbol.for("react.profiler"):60114,s=o?Symbol.for("react.provider"):60109,l=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.async_mode"):60111,y=o?Symbol.for("react.concurrent_mode"):60111,d=o?Symbol.for("react.forward_ref"):60112,m=o?Symbol.for("react.suspense"):60113,b=o?Symbol.for("react.suspense_list"):60120,v=o?Symbol.for("react.memo"):60115,g=o?Symbol.for("react.lazy"):60116,h=o?Symbol.for("react.block"):60121,S=o?Symbol.for("react.fundamental"):60117,O=o?Symbol.for("react.responder"):60118,x=o?Symbol.for("react.scope"):60119;function E(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case a:switch(e=e.type){case p:case y:case c:case f:case u:case m:return e;default:switch(e=e&&e.$$typeof){case l:case d:case g:case v:case s:return e;default:return t}}case i:return t}}}function w(e){return E(e)===y}var $={AsyncMode:p,ConcurrentMode:y,ContextConsumer:l,ContextProvider:s,Element:a,ForwardRef:d,Fragment:c,Lazy:g,Memo:v,Portal:i,Profiler:f,StrictMode:u,Suspense:m,isAsyncMode:function(e){return w(e)||E(e)===p},isConcurrentMode:w,isContextConsumer:function(e){return E(e)===l},isContextProvider:function(e){return E(e)===s},isElement:function(e){return"object"==typeof e&&null!==e&&e.$$typeof===a},isForwardRef:function(e){return E(e)===d},isFragment:function(e){return E(e)===c},isLazy:function(e){return E(e)===g},isMemo:function(e){return E(e)===v},isPortal:function(e){return E(e)===i},isProfiler:function(e){return E(e)===f},isStrictMode:function(e){return E(e)===u},isSuspense:function(e){return E(e)===m},isValidElementType:function(e){return"string"==typeof e||"function"==typeof e||e===c||e===y||e===f||e===u||e===m||e===b||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===v||e.$$typeof===s||e.$$typeof===l||e.$$typeof===d||e.$$typeof===S||e.$$typeof===O||e.$$typeof===x||e.$$typeof===h)},typeOf:E},j=r(function(e,t){"production"!==process.env.NODE_ENV&&function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,r=e?Symbol.for("react.portal"):60106,o=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,i=e?Symbol.for("react.profiler"):60114,c=e?Symbol.for("react.provider"):60109,u=e?Symbol.for("react.context"):60110,f=e?Symbol.for("react.async_mode"):60111,s=e?Symbol.for("react.concurrent_mode"):60111,l=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,y=e?Symbol.for("react.suspense_list"):60120,d=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,b=e?Symbol.for("react.block"):60121,v=e?Symbol.for("react.fundamental"):60117,g=e?Symbol.for("react.responder"):60118,h=e?Symbol.for("react.scope"):60119;function S(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:var y=e.type;switch(y){case f:case s:case o:case i:case a:case p:return y;default:var b=y&&y.$$typeof;switch(b){case u:case l:case m:case d:case c:return b;default:return t}}case r:return t}}}var O=s,x=u,E=c,w=n,$=l,j=o,T=m,P=d,C=r,N=i,I=a,_=p,k=!1;function R(e){return S(e)===s}t.AsyncMode=f,t.ConcurrentMode=O,t.ContextConsumer=x,t.ContextProvider=E,t.Element=w,t.ForwardRef=$,t.Fragment=j,t.Lazy=T,t.Memo=P,t.Portal=C,t.Profiler=N,t.StrictMode=I,t.Suspense=_,t.isAsyncMode=function(e){return k||(k=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),R(e)||S(e)===f},t.isConcurrentMode=R,t.isContextConsumer=function(e){return S(e)===u},t.isContextProvider=function(e){return S(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return S(e)===l},t.isFragment=function(e){return S(e)===o},t.isLazy=function(e){return S(e)===m},t.isMemo=function(e){return S(e)===d},t.isPortal=function(e){return S(e)===r},t.isProfiler=function(e){return S(e)===i},t.isStrictMode=function(e){return S(e)===a},t.isSuspense=function(e){return S(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===s||e===i||e===a||e===p||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===d||e.$$typeof===c||e.$$typeof===u||e.$$typeof===l||e.$$typeof===v||e.$$typeof===g||e.$$typeof===h||e.$$typeof===b)},t.typeOf=S}()}),T=r(function(e){e.exports="production"===process.env.NODE_ENV?$:j}),P=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,I=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,o=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),a=1;a<arguments.length;a++){for(var i in n=Object(arguments[a]))C.call(n,i)&&(o[i]=n[i]);if(P){r=P(n);for(var c=0;c<r.length;c++)N.call(n,r[c])&&(o[r[c]]=n[r[c]])}}return o},_=Function.call.bind(Object.prototype.hasOwnProperty),k="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",R=_,A=function(){};if("production"!==process.env.NODE_ENV){var M=k,V={},D=R;A=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}function F(e,t,n,r,o){if("production"!==process.env.NODE_ENV)for(var a in e)if(D(e,a)){var i;try{if("function"!=typeof e[a]){var c=Error((r||"React class")+": "+n+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}i=e[a](t,a,r,n,null,M)}catch(e){i=e}if(!i||i instanceof Error||A((r||"React class")+": type specification of "+n+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof i+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),i instanceof Error&&!(i.message in V)){V[i.message]=!0;var u=o?o():"";A("Failed "+n+" type: "+i.message+(null!=u?u:""))}}}F.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(V={})};var q=F,z=function(){};function W(){return null}function L(){}function B(){}"production"!==process.env.NODE_ENV&&(z=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}),B.resetWarningCache=L;var U=r(function(e){e.exports="production"!==process.env.NODE_ENV?function(e){var t="function"==typeof Symbol&&Symbol.iterator,n="<<anonymous>>",r={array:c("array"),bigint:c("bigint"),bool:c("boolean"),func:c("function"),number:c("number"),object:c("object"),string:c("string"),symbol:c("symbol"),any:i(W),arrayOf:function(e){return i(function(t,n,r,o,i){if("function"!=typeof e)return new a("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var c=t[n];if(!Array.isArray(c))return new a("Invalid "+o+" `"+i+"` of type `"+s(c)+"` supplied to `"+r+"`, expected an array.");for(var u=0;u<c.length;u++){var f=e(c,u,r,o,i+"["+u+"]",k);if(f instanceof Error)return f}return null})},element:i(function(t,n,r,o,i){var c=t[n];return e(c)?null:new a("Invalid "+o+" `"+i+"` of type `"+s(c)+"` supplied to `"+r+"`, expected a single ReactElement.")}),elementType:i(function(e,t,n,r,o){var i=e[t];return T.isValidElementType(i)?null:new a("Invalid "+r+" `"+o+"` of type `"+s(i)+"` supplied to `"+n+"`, expected a single ReactElement type.")}),instanceOf:function(e){return i(function(t,r,o,i,c){return t[r]instanceof e?null:new a("Invalid "+i+" `"+c+"` of type `"+((u=t[r]).constructor&&u.constructor.name?u.constructor.name:n)+"` supplied to `"+o+"`, expected instance of `"+(e.name||n)+"`.");var u})},node:i(function(e,t,n,r,o){return f(e[t])?null:new a("Invalid "+r+" `"+o+"` supplied to `"+n+"`, expected a ReactNode.")}),objectOf:function(e){return i(function(t,n,r,o,i){if("function"!=typeof e)return new a("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var c=t[n],u=s(c);if("object"!==u)return new a("Invalid "+o+" `"+i+"` of type `"+u+"` supplied to `"+r+"`, expected an object.");for(var f in c)if(R(c,f)){var l=e(c,f,r,o,i+"."+f,k);if(l instanceof Error)return l}return null})},oneOf:function(e){return Array.isArray(e)?i(function(t,n,r,i,c){for(var u=t[n],f=0;f<e.length;f++)if(o(u,e[f]))return null;var s=JSON.stringify(e,function(e,t){return"symbol"===l(t)?String(t):t});return new a("Invalid "+i+" `"+c+"` of value `"+String(u)+"` supplied to `"+r+"`, expected one of "+s+".")}):("production"!==process.env.NODE_ENV&&z(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),W)},oneOfType:function(e){if(!Array.isArray(e))return"production"!==process.env.NODE_ENV&&z("Invalid argument supplied to oneOfType, expected an instance of array."),W;for(var t=0;t<e.length;t++){var n=e[t];if("function"!=typeof n)return z("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+p(n)+" at index "+t+"."),W}return i(function(t,n,r,o,i){for(var c=[],u=0;u<e.length;u++){var f=(0,e[u])(t,n,r,o,i,k);if(null==f)return null;f.data&&R(f.data,"expectedType")&&c.push(f.data.expectedType)}return new a("Invalid "+o+" `"+i+"` supplied to `"+r+"`"+(c.length>0?", expected one of type ["+c.join(", ")+"]":"")+".")})},shape:function(e){return i(function(t,n,r,o,i){var c=t[n],f=s(c);if("object"!==f)return new a("Invalid "+o+" `"+i+"` of type `"+f+"` supplied to `"+r+"`, expected `object`.");for(var p in e){var y=e[p];if("function"!=typeof y)return u(r,o,i,p,l(y));var d=y(c,p,r,o,i+"."+p,k);if(d)return d}return null})},exact:function(e){return i(function(t,n,r,o,i){var c=t[n],f=s(c);if("object"!==f)return new a("Invalid "+o+" `"+i+"` of type `"+f+"` supplied to `"+r+"`, expected `object`.");var p=I({},t[n],e);for(var y in p){var d=e[y];if(R(e,y)&&"function"!=typeof d)return u(r,o,i,y,l(d));if(!d)return new a("Invalid "+o+" `"+i+"` key `"+y+"` supplied to `"+r+"`.\nBad object: "+JSON.stringify(t[n],null,"  ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null,"  "));var m=d(c,y,r,o,i+"."+y,k);if(m)return m}return null})}};function o(e,t){return e===t?0!==e||1/e==1/t:e!=e&&t!=t}function a(e,t){this.message=e,this.data=t&&"object"==typeof t?t:{},this.stack=""}function i(e){function t(t,r,o,i,c,u,f){if(i=i||n,u=u||o,f!==k){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}return null==r[o]?t?new a(null===r[o]?"The "+c+" `"+u+"` is marked as required in `"+i+"`, but its value is `null`.":"The "+c+" `"+u+"` is marked as required in `"+i+"`, but its value is `undefined`."):null:e(r,o,i,c,u)}process;var r=t.bind(null,!1);return r.isRequired=t.bind(null,!0),r}function c(e){return i(function(t,n,r,o,i,c){var u=t[n];return s(u)!==e?new a("Invalid "+o+" `"+i+"` of type `"+l(u)+"` supplied to `"+r+"`, expected `"+e+"`.",{expectedType:e}):null})}function u(e,t,n,r,o){return new a((e||"React class")+": "+t+" type `"+n+"."+r+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+o+"`.")}function f(n){switch(typeof n){case"number":case"string":case"undefined":return!0;case"boolean":return!n;case"object":if(Array.isArray(n))return n.every(f);if(null===n||e(n))return!0;var r=function(e){var n=e&&(t&&e[t]||e["@@iterator"]);if("function"==typeof n)return n}(n);if(!r)return!1;var o,a=r.call(n);if(r!==n.entries){for(;!(o=a.next()).done;)if(!f(o.value))return!1}else for(;!(o=a.next()).done;){var i=o.value;if(i&&!f(i[1]))return!1}return!0;default:return!1}}function s(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function l(e){if(null==e)return""+e;var t=s(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function p(e){var t=l(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return a.prototype=Error.prototype,r.checkPropTypes=q,r.resetWarningCache=q.resetWarningCache,r.PropTypes=r,r}(T.isElement):function(){function e(e,t,n,r,o,a){if(a!==k){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:B,resetWarningCache:L};return n.PropTypes=n,n}()}),J=function(t){var r=t.length,o=void 0===r?6:r,a=t.autoSubmit,i=void 0===a||a,c=t.onComplete,u=t.inputClassName,f=void 0===u?"otp-input":u,s=t.containerClassName,l=void 0===s?"otp-container":s,p=t.errorClassName,y=void 0===p?"otp-error":p,d=t.errorMessage,m=void 0===d?"Invalid OTP":d,b=t.isValid,v=void 0===b||b,g=e.useState(Array(o).fill("")),h=g[0],S=g[1],O=e.useState(0),x=O[0],E=O[1],w=function(e){e.preventDefault();var t=e.clipboardData.getData("text/plain").slice(0,o);if(/^[0-9]+$/.test(t)){for(var n=[].concat(h),r=0;r<t.length;r++)r<o&&(n[r]=t[r]);S(n),t.length===o&&i&&$(n.join(""))}},$=function(e){c&&c(e)};return e.useEffect(function(){var e=document.getElementById("otp-input-"+x);e&&e.focus()},[x]),/*#__PURE__*/n.default.createElement("div",{className:l},/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",gap:"10px"}},h.map(function(e,t){/*#__PURE__*/return n.default.createElement("input",{key:t,id:"otp-input-"+t,type:"text",maxLength:"1",value:e,onChange:function(e){return function(e,t){var n=e.target.value;if(/^[0-9]$/.test(n)){var r=[].concat(h);r[t]=n,S(r),t<o-1?E(t+1):i&&$(r.join(""))}else if(""===n){var a=[].concat(h);a[t]="",S(a),t>0&&E(t-1)}}(e,t)},onKeyDown:function(e){return function(e,t){"Backspace"===e.key&&!h[t]&&t>0&&E(t-1)}(e,t)},onPaste:w,className:f,style:{width:"40px",height:"40px",textAlign:"center",fontSize:"18px",border:"1px solid "+(v?"#ccc":"red")},onFocus:function(){return E(t)}})})),!v&&/*#__PURE__*/n.default.createElement("div",{className:y},m))};return J.propTypes={length:U.number,autoSubmit:U.bool,onComplete:U.func.isRequired,inputClassName:U.string,containerClassName:U.string,errorClassName:U.string,errorMessage:U.string,isValid:U.bool},J});
//# sourceMappingURL=index.umd.js.map