🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-verification-input
Advanced tools
react-verification-input - npm Package Compare versions
Comparing version 2.0.0-beta.2 to 2.0.0-beta.3
@@ -6,2 +6,2 @@ module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t,r){e.exports=r(4)()},function(e,t){e.exports=require("react")},function(e,t,r){var n; | ||
| http://jedwatson.github.io/classnames | ||
| */!function(){"use strict";var r={}.hasOwnProperty;function a(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var i=typeof n;if("string"===i||"number"===i)e.push(n);else if(Array.isArray(n)&&n.length){var c=a.apply(null,n);c&&e.push(c)}else if("object"===i)for(var o in n)r.call(n,o)&&n[o]&&e.push(o)}}return e.join(" ")}e.exports?(a.default=a,e.exports=a):void 0===(n=function(){return a}.apply(t,[]))||(e.exports=n)}()},function(e,t){e.exports=".verification-input__container{position:relative}.verification-input__container--default{max-width:500px}.verification-input{height:100%;position:absolute;left:-2000px;opacity:0;transform:scale(0)}.verification-input--debug{left:0;bottom:-70px;opacity:1;transform:scale(1)}.verification-input__characters{display:flex}.verification-input__characters--default{height:50px}.verification-input__character{height:100%;flex-grow:1;flex-basis:0}.verification-input__character--default{font-size:36px;line-height:50px;text-align:center;background-color:white;margin-left:8px;border:1px solid black;cursor:default;user-select:none;box-sizing:border-box}.verification-input__character--default:first-child{margin-left:0}@media (min-width: 768px){.verification-input__character--default{margin-left:16px}}.verification-input__character--inactive--default{color:dimgray;background-color:lightgray}.verification-input__character--selected--default{border-color:cornflowerblue;color:cornflowerblue}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9hbmRpL0RvY3VtZW50cy9naXQtcmVwb3MvcmVhY3QtdmVyaWZpY2F0aW9uLWlucHV0L3NyYy9zdHlsZXMuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSwrQkFDRSxpQkFBa0IsQ0FDbkIsd0NBR0MsZUFBZ0IsQ0FDakIsb0JBR0MsWUFDQSxrQkFDQSxhQUNBLFVBQ0Esa0JBQW1CLENBQ3BCLDJCQUdDLE9BQ0EsYUFDQSxVQUNBLGtCQUFtQixDQUNwQixnQ0FHQyxZQUFhLENBQ2QseUNBR0MsV0E5QmlCLENBK0JsQiwrQkFHQyxZQUNBLFlBQ0EsWUFBYSxDQUNkLHdDQUdDLGVBQ0EsaUJBQ0Esa0JBQ0EsdUJBQ0EsZ0JBQ0EsdUJBQ0EsZUFDQSxpQkFDQSxxQkFBc0IsQ0FUeEIsb0RBWUksYUFBYyxDQUNmLDBCQWJILHdDQWdCSSxnQkFBaUIsQ0FFcEIsQ0FFRCxrREFDRSxjQUNBLDBCQUEyQixDQUM1QixrREFHQyw0QkFDQSxvQkFBcUIsQ0FDdEIiLCJmaWxlIjoic3JjL3N0eWxlcy5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiJGlucHV0LWhlaWdodDogNTBweDtcblxuLnZlcmlmaWNhdGlvbi1pbnB1dF9fY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4udmVyaWZpY2F0aW9uLWlucHV0X19jb250YWluZXItLWRlZmF1bHQge1xuICBtYXgtd2lkdGg6IDUwMHB4O1xufVxuXG4udmVyaWZpY2F0aW9uLWlucHV0IHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IC0yMDAwcHg7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zZm9ybTogc2NhbGUoMCk7XG59XG5cbi52ZXJpZmljYXRpb24taW5wdXQtLWRlYnVnIHtcbiAgbGVmdDogMDtcbiAgYm90dG9tOiAtNzBweDtcbiAgb3BhY2l0eTogMTtcbiAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbn1cblxuLnZlcmlmaWNhdGlvbi1pbnB1dF9fY2hhcmFjdGVycyB7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG5cbi52ZXJpZmljYXRpb24taW5wdXRfX2NoYXJhY3RlcnMtLWRlZmF1bHQge1xuICBoZWlnaHQ6ICRpbnB1dC1oZWlnaHQ7XG59XG5cbi52ZXJpZmljYXRpb24taW5wdXRfX2NoYXJhY3RlciB7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LWJhc2lzOiAwO1xufVxuXG4udmVyaWZpY2F0aW9uLWlucHV0X19jaGFyYWN0ZXItLWRlZmF1bHQge1xuICBmb250LXNpemU6IDM2cHg7XG4gIGxpbmUtaGVpZ2h0OiAkaW5wdXQtaGVpZ2h0O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICBtYXJnaW4tbGVmdDogOHB4O1xuICBib3JkZXI6IDFweCBzb2xpZCBibGFjaztcbiAgY3Vyc29yOiBkZWZhdWx0O1xuICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAmOmZpcnN0LWNoaWxkIHtcbiAgICBtYXJnaW4tbGVmdDogMDtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIG1hcmdpbi1sZWZ0OiAxNnB4O1xuICB9XG59XG5cbi52ZXJpZmljYXRpb24taW5wdXRfX2NoYXJhY3Rlci0taW5hY3RpdmUtLWRlZmF1bHQge1xuICBjb2xvcjogZGltZ3JheTtcbiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5O1xufVxuXG4udmVyaWZpY2F0aW9uLWlucHV0X19jaGFyYWN0ZXItLXNlbGVjdGVkLS1kZWZhdWx0IHtcbiAgYm9yZGVyLWNvbG9yOiBjb3JuZmxvd2VyYmx1ZTtcbiAgY29sb3I6IGNvcm5mbG93ZXJibHVlO1xufVxuIl19 */"},function(e,t,r){"use strict";var n=r(5);function a(){}function i(){}i.resetWarningCache=a,e.exports=function(){function e(e,t,r,a,i,c){if(c!==n){var o=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 o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var r={array: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:i,resetWarningCache:a};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t);var n=r(1),a=r.n(n),i=r(2),c=r.n(i),o=r(0),l=r.n(o),u=8,s=37,f=39,p=46,d=r(3),b=r.n(d);function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e){return function(e){if(Array.isArray(e))return I(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function g(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,a=!1,i=void 0;try{for(var c,o=e[Symbol.iterator]();!(n=(c=o.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){a=!0,i=e}finally{try{n||null==o.return||o.return()}finally{if(a)throw i}}return r}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return I(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?I(e,t):void 0}}function I(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var Q=function(e){var t=v(Object(n.useState)(0),2),r=t[0],i=t[1],o=v(Object(n.useState)(""),2),l=o[0],d=o[1],x=v(Object(n.useState)(!1),2),I=x[0],Q=x[1],W=Object(n.useRef)(null);Object(n.useEffect)((function(){e.autoFocus&&W.current.focus()}),[]);var Z=function(){return""===e.placeholder.trim()?" ":e.placeholder},B=function(t){t>e.length-1?t=e.length-1:t<0&&(t=0),W.current.setSelectionRange(t,t+1),i(t)},X=function(e){B(r+e)},O=function(e,t){var r=t.substring(0,e),n=t.substring(e+1);return"".concat(r).concat(Z()).concat(n)},F=function(t,r){var n,a,i=t,c=t.replace(RegExp("".concat(Z(),"+$")),"");if(c!==t&&(r=c.length),!RegExp("^[".concat(e.validChars).concat(Z(),"]{0,").concat(e.length,"}$")).test(c))return W.current.value=i,void X(0);W.current.value=c,B(r),d(c),null===(n=e.input)||void 0===n||null===(a=n.onChange)||void 0===a||a.call(n,c)},G=function(e){var t=parseInt(e.target.id.replace("field-",""));t=Math.min(t,W.current.value.length),W.current.focus(),B(t)},N=function(e){var t,r=e.clipboardData,n=null==r||null===(t=r.getData("Text"))||void 0===t?void 0:t.replace(/\s/g,"");null!=n&&(e.preventDefault(),F(n,n.length))},j=e.length,Y=e.removeDefaultStyles,_=e.debug,V=e.container,C=e.inputField,D=e.characters,L=e.character,R=e.input,S=V.className,A=g(V,["className"]),w=C.className,J=g(C,["className"]),U=D.className,H=g(D,["className"]),k=L.className,E=L.classNameInactive,T=L.classNameSelected,M=g(L,["className","classNameInactive","classNameSelected"]);return a.a.createElement("div",y({className:c()("verification-input__container",S,{"verification-input__container--default":!Y})},A),a.a.createElement("input",y({ref:W,className:c()("verification-input",w,{"verification-input--debug":_}),onKeyUp:function(e){var t=e.keyCode;if(t!==s){if(t===f)return r>=l.length?void X(0):void X(1);var n=W.current.selectionStart,a=W.current.value;if(a!==l)return t===u?(l[n=r]!==Z()&&void 0!==l[n]||(n-=1),a=O(n,l),void F(a,n)):t===p?(l[n=r]===Z()&&(n+=1),a=O(n,l),void F(a,n)):void F(a,n);"Tab"===e.key?B(a.length):B(n)}else X(-1)},onFocus:function(){var e;Q(!0),null==R||null===(e=R.onFocus)||void 0===e||e.call(R)},onBlur:function(){var e;Q(!1),null==R||null===(e=R.onBlur)||void 0===e||e.call(R)},onPaste:N},J)),a.a.createElement("div",y({"data-testid":"characters",className:c()("verification-input__characters",U,{"verification-input__characters--default":!Y}),onClick:function(){return W.current.focus()}},H),h(Array(j)).map((function(e,t){var n;return a.a.createElement("div",y({className:c()("verification-input__character",k,(n={"verification-input__character--default":!Y,"verification-input__character--selected--default":!Y&&r===t&&I},m(n,T,r===t&&I),m(n,"verification-input__character--inactive--default",!Y&&l.length<t),m(n,E,l.length<t),n)),onClick:G,id:"field-".concat(t),"data-testid":"character-".concat(t),key:t,onPaste:N},M),l[t]||Z())}))),a.a.createElement("style",{dangerouslySetInnerHTML:{__html:b.a}}))};Q.propTypes={length:l.a.number,validChars:l.a.string,placeholder:l.a.string,autoFocus:l.a.bool,removeDefaultStyles:l.a.bool,debug:l.a.bool,container:l.a.shape({className:l.a.string}),inputField:l.a.shape({className:l.a.string}),characters:l.a.shape({className:l.a.string}),character:l.a.shape({className:l.a.string})},Q.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"·",autoFocus:!1,removeDefaultStyles:!1,debug:!1,container:{},inputField:{},characters:{},character:{}};t.default=Q}]); | ||
| */!function(){"use strict";var r={}.hasOwnProperty;function a(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o=typeof n;if("string"===o||"number"===o)e.push(n);else if(Array.isArray(n)&&n.length){var c=a.apply(null,n);c&&e.push(c)}else if("object"===o)for(var i in n)r.call(n,i)&&n[i]&&e.push(i)}}return e.join(" ")}e.exports?(a.default=a,e.exports=a):void 0===(n=function(){return a}.apply(t,[]))||(e.exports=n)}()},function(e,t){e.exports=".vi__wrapper{position:relative}.vi{height:100%;box-sizing:border-box;position:absolute;left:-2000px;opacity:0;transform:scale(0)}.vi--debug{left:0;bottom:-70px;opacity:1;transform:scale(1)}.vi__container{display:flex}.vi__container--default{height:50px;width:300px}.vi__character{height:100%;flex-grow:1;flex-basis:0;text-align:center}.vi__character--default{font-size:36px;line-height:50px;color:black;background-color:white;margin-left:8px;border:1px solid black;cursor:default;user-select:none;box-sizing:border-box}.vi__character--default:first-child{margin-left:0}.vi__character--inactive--default{color:dimgray;background-color:lightgray}.vi__character--selected--default{outline:2px solid cornflowerblue;color:cornflowerblue}\n"},function(e,t,r){"use strict";var n=r(5);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,r,a,o,c){if(c!==n){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 r={array: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:o,resetWarningCache:a};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t);var n=r(1),a=r.n(n),o=r(2),c=r.n(o),i=r(0),u=r.n(i),l={BACKSPACE:8,ARROW_LEFT:37,ARROW_UP:38,ARROW_RIGHT:39,ARROW_DOWN:40,DELETE:46},s=r(3),f=r.n(s);function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){return function(e){if(Array.isArray(e))return b(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||v(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(){return(y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,a=!1,o=void 0;try{for(var c,i=e[Symbol.iterator]();!(n=(c=i.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{n||null==i.return||i.return()}finally{if(a)throw o}}return r}(e,t)||v(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function g(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var m=Object(n.forwardRef)((function(e,t){var r=e.value,o=e.length,i=e.validChars,u=e.placeholder,s=e.autoFocus,v=e.removeDefaultStyles,b=e.debug,m=e.inputProps,_=e.classNames,O=e.onChange,x=e.onFocus,S=e.onBlur,j=g(e,["value","length","validChars","placeholder","autoFocus","removeDefaultStyles","debug","inputProps","classNames","onChange","onFocus","onBlur"]),R=h(Object(n.useState)(""),2),A=R[0],P=R[1],w=h(Object(n.useState)(!1),2),E=w[0],T=w[1],C=Object(n.useRef)(null);Object(n.useEffect)((function(){s&&C.current.focus()}),[s]);var I=function(){C.current.focus()},k=function(){return null!=r?r:A};return a.a.createElement("div",{className:"vi__wrapper"},a.a.createElement("input",y({value:k(),onChange:function(e){var t=e.target.value.replace(/\s/g,"");RegExp("^[".concat(i,"]{0,").concat(o,"}$")).test(t)&&(O?null==O||O(t):P(t))},ref:function(e){C.current=e,"function"==typeof t?t(e):t&&(t.current=e)},className:c()("vi",{"vi--debug":b}),onKeyDown:function(e){[l.ARROW_LEFT,l.ARROW_RIGHT,l.ARROW_UP,l.ARROW_DOWN].includes(e.keyCode)&&e.preventDefault()},onFocus:function(e){T(!0);var t=e.target.value;e.target.setSelectionRange(t.length,t.length),null==x||x()},onBlur:function(){T(!1),null==S||S()}},m)),a.a.createElement("div",y({"data-testid":"container",className:c()("vi__container",_.container,{"vi__container--default":!v}),onClick:function(){return C.current.focus()}},j),d(Array(o)).map((function(e,t){var r;return a.a.createElement("div",{className:c()("vi__character",_.character,(r={"vi__character--default":!v,"vi__character--selected--default":!v&&(k().length===t||k().length===t+1&&o===t+1)&&E},p(r,_.characterSelected,(k().length===t||k().length===t+1&&o===t+1)&&E),p(r,"vi__character--inactive--default",!v&&k().length<t),p(r,_.characterInactive,k().length<t),r)),onClick:I,id:"field-".concat(t),"data-testid":"character-".concat(t),key:t},k()[t]||u)}))),a.a.createElement("style",{dangerouslySetInnerHTML:{__html:f.a}}))}));m.displayName="VerificationInput",m.propTypes={value:u.a.string,length:u.a.number,validChars:u.a.string,placeholder:u.a.string,autoFocus:u.a.bool,removeDefaultStyles:u.a.bool,debug:u.a.bool,inputProps:u.a.object,classNames:u.a.shape({container:u.a.string,character:u.a.string,characterInactive:u.a.string,characterSelected:u.a.string}),onChange:u.a.func,onFocus:u.a.func,onBlur:u.a.func},m.defaultProps={length:6,validChars:"A-Za-z0-9",placeholder:"·",autoFocus:!1,removeDefaultStyles:!1,debug:!1,inputProps:{},classNames:{}};t.default=m}]); |
| { | ||
| "name": "react-verification-input", | ||
| "version": "2.0.0-beta.2", | ||
| "version": "2.0.0-beta.3", | ||
| "main": "dist/index.js", | ||
@@ -13,3 +13,4 @@ "repository": "https://github.com/andreaswilli/react-verification-input.git", | ||
| "serve": "webpack --watch", | ||
| "test": "jest", | ||
| "lint": "eslint src", | ||
| "test": "jest --coverage", | ||
| "bump-major": "npm version major", | ||
@@ -21,3 +22,3 @@ "bump-minor": "npm version minor", | ||
| "bump-prepatch": "npm version prepatch --preid beta", | ||
| "bump-prerelease": "npm version prerelease", | ||
| "bump-prerelease": "npm version prerelease --preid beta", | ||
| "push-tags": "git push --follow-tags", | ||
@@ -55,3 +56,3 @@ "publish": "npm publish", | ||
| "@testing-library/react": "^11.0.4", | ||
| "@testing-library/user-event": "^12.1.6", | ||
| "@testing-library/user-event": "^13.1.9", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
@@ -62,4 +63,8 @@ "babel-jest": "^23.4.2", | ||
| "css-loader": "^4.3.0", | ||
| "eslint": "^7.10.0", | ||
| "eslint-plugin-jest": "^24.0.2", | ||
| "eslint-plugin-react": "^7.21.3", | ||
| "eslint-plugin-react-hooks": "^4.1.2", | ||
| "jest": "^26.4.2", | ||
| "node-sass": "^4.14.1", | ||
| "node-sass": "^6.0.0", | ||
| "prop-types": "^15.7.2", | ||
@@ -66,0 +71,0 @@ "regenerator-runtime": "^0.13.7", |
127
README.md
| # react-verification-input | ||
| [](http://badge.fury.io/js/react-verification-input) | ||
| [](https://www.npmjs.com/package/react-verification-input) | ||
| [](https://www.npmjs.com/package/react-verification-input) | ||
| [](http://hits.dwyl.io/andreaswilli/react-verification-input) | ||
| [](https://github.com/andreaswilli/react-verification-input/actions?query=branch%3Amaster) | ||
|  | ||
| `react-verification-input` is a customizable, masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating. Also I'm sure you can think of many more creative use cases. This component is fully compatible with [Redux Form](https://github.com/erikras/redux-form) 🎉 | ||
| `react-verification-input` is a customizable, masked input that can be used to enter all sorts of codes e.g. security codes when two-factor authenticating. Also I'm sure you can think of many more creative use cases. | ||
|  | ||
|  | ||
@@ -47,21 +48,23 @@ ## Installation | ||
| ## API documentation | ||
| ## API Documentation | ||
| All of these props are optional and thus come with a default value. However it's recommended to use at least the `length`, `validChars` and `placeholder` props. | ||
| All of these props are optional and some also come with a default value. However it's recommended to use at least the `length`, `validChars` and `placeholder` props. | ||
| | Option | Type | Default | Description | | ||
| | ------------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | length | Number | `6` | Define how many characters the input should allow. | | ||
| | validChars | String | `'A-Za-z0-9'` | Define which characters should be allowed. The string is inserted into a regexp character set ( `/[]/` ) for input validating. | | ||
| | placeholder | String | `'·'` (U+00B7) | Define which character should be displayed as placeholder in empty fields. In order to use the blank character as a placeholder, specify this option as `' '` or `''`. | | ||
| | autoFocus | Boolean | `false` | This will make the input focus automatically as soon as the component is rendered. | | ||
| | removeDefaultStyles | Boolean | `false` | Use this option to completely remove any styles that are not required for the component to work properly. This is useful if you want to override the default styles. | | ||
| | debug | Boolean | `false` | This will reveal what is going on behind the scenes, which might come in handy when trying to better understand the component. Obviously you don't want to use this in production. 😄 | | ||
| | container | Object | `{}` | Define the props of the container `div`. All props except for `className` are passed directly to the `div` element. Use `{ className: 'your-class' }` to style the input. These options are available on every element. For more details on how to apply your custom styling see [here](#custom-styling). | | ||
| | inputField | Object | `{}` | Define the props of the `input` element. See `container` for more details. | | ||
| | characters | Object | `{}` | Define the props of the characters `div`. See `container` for more details. | | ||
| | character | Object | `{}` | Define the props of the character `div`s. See `container` for more details. | | ||
| | getInputRef | Function | `() => {}` | Define a function that will receive input element `ref`. | | ||
| | Option | Type | Default | Description | | ||
| | ------------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | value | String | - | The value of the verification input. Behaves the same way as the input's value prop. | | ||
| | length | Number | `6` | Number of characters the input should allow. | | ||
| | validChars | String | `'A-Za-z0-9'` | Set of characters the input should allow. The string is inserted into a regexp character set ( `/[]/` ) for input validation. | | ||
| | placeholder | String | `'·'` (U+00B7) | The character to display in empty fields. In order to use the blank character as a placeholder, specify this option as `' '` or `''`. | | ||
| | autoFocus | Boolean | `false` | Focus the input automatically as soon as it is rendered. | | ||
| | removeDefaultStyles | Boolean | `false` | Completely remove any styles that are not required for the component to work properly. This is useful if you want to override the default styles. | | ||
| | debug | Boolean | `false` | Reveal what is going on behind the scenes, which might come in handy when trying to better understand the component. Obviously you don't want to use this in production. 😄 | | ||
| | inputProps | Object | `{}` | These props get forwarded to the input element. | | ||
| | classNames | Object | `{}` | Classnames to add to the specified elements. For more details see [Custom Styling](#custom-styling). | | ||
| | onChange | Function | - | Callback function that gets called with the value whenever it changes. | | ||
| | onFocus | Function | - | Callback function that gets called when the component gets focus. | | ||
| | onBlur | Function | - | Callback function that gets called when the component loses focus. | | ||
| | (any other prop) | Any | - | Any props not listed above will be directly forwarded to the `container` element. | | ||
| ## Custom styling | ||
| ## Custom Styling | ||
@@ -75,29 +78,27 @@ > **Note:** It's recommended to use the `removeDefaultStyles` option when applying custom styles, otherwise you may not be able to override the default styles. | ||
| removeDefaultStyles | ||
| container={{ | ||
| className: "container", | ||
| classNames={{ | ||
| container: "container", | ||
| character: "character", | ||
| characterInactive: "character--inactive", | ||
| characterSelected: "character--selected", | ||
| }} | ||
| characters={{ | ||
| className: "characters", | ||
| }} | ||
| character={{ | ||
| className: "character", | ||
| classNameInactive: "character--inactive", | ||
| classNameSelected: "character--selected", | ||
| }} | ||
| /> | ||
| ``` | ||
| There is also the `inputField` prop, which will attach styles to the actual input element, but you probably don't want to use this as it's outside the viewport and thus not visible. | ||
| ### Component Structure | ||
| Have a look at these two examples: | ||
| The following illustration shows the component structure. | ||
| ### Example 1 | ||
|  | ||
| ### Example | ||
| Have a look at this example: | ||
|  | ||
| ```css | ||
| .container { | ||
| max-width: 350px; | ||
| } | ||
| .characters { | ||
| height: 50px; | ||
| width: 300px; | ||
| } | ||
@@ -108,12 +109,15 @@ | ||
| font-size: 36px; | ||
| color: white; | ||
| background-color: rgba(255, 255, 255, 0.2); | ||
| border: 1px solid transparent; | ||
| border-radius: 8px; | ||
| color: white; | ||
| margin-left: 8px; | ||
| } | ||
| .character:first-child { | ||
| margin-left: 0; | ||
| } | ||
| .character--inactive { | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| box-shadow: none; | ||
| } | ||
@@ -126,47 +130,4 @@ | ||
|  | ||
| ### Example 2 | ||
| ```css | ||
| .container { | ||
| max-width: 350px; | ||
| } | ||
| .characters { | ||
| height: 50px; | ||
| } | ||
| .character { | ||
| line-height: 50px; | ||
| font-size: 36px; | ||
| background-color: rgba(255, 255, 255, 0.8); | ||
| border: none; | ||
| border-radius: 8px; | ||
| color: black; | ||
| margin-left: 8px; | ||
| box-shadow: inset 0 0 2px black; | ||
| &:nth-child(4) { | ||
| margin-left: 24px; | ||
| } | ||
| } | ||
| .character--inactive { | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| box-shadow: none; | ||
| } | ||
| .character--selected { | ||
| color: black; | ||
| outline: red 2px; | ||
| background-color: white; | ||
| } | ||
| ``` | ||
|  | ||
| ## Contributing | ||
| If you want to contribute, feel free to do so. I'd very much appreciate that.❤️ | ||
| Just keep it consistent and I'm very happy to review your PR. | ||
| If you want to contribute, feel free to do so. I'd very much appreciate that. ❤️ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
105251
119.72%- Number of package files
24
84.62%- Number of low supply chain risk alerts
2
-33.33%Worsened metrics
- Dev dependency count
38
11.76%- Lines of code
592
-8.22%- Number of lines in readme file
130
-23.08%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes