react-input-verification-code - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.js

@@ -99,3 +99,5 @@ var React = require('react');
       var targetIncludesContainer = e.composedPath().reduce(function (bool, path) {
-        return bool || path.dataset.reactInputVerificationCodeId === CONTAINER_DATA_ID;
+        var _path$dataset;
+
+        return bool || ((_path$dataset = path.dataset) === null || _path$dataset === void 0 ? void 0 : _path$dataset.reactInputVerificationCodeId) === CONTAINER_DATA_ID;
       }, false);
@@ -102,0 +104,0 @@ if (!targetIncludesContainer) setActiveIndex(-1);

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport './index.css';\n\nconst KEY_CODE = {\n  BACKSPACE: 8,\n  ARROW_LEFT: 37,\n  ARROW_RIGHT: 39,\n  DELETE: 46,\n};\n\nconst CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';\n\nexport default ({ length = 4, placeholder = '·' }) => {\n  const [activeIndex, setActiveIndex] = React.useState<number>(-1);\n  const [value, setValue] = React.useState<string[]>(\n    new Array(length).fill(placeholder)\n  );\n\n  const codeInputRef = React.createRef<HTMLInputElement>();\n  const itemsRef = React.useMemo(\n    () => [...new Array(length)].map(() => React.createRef<HTMLDivElement>()),\n    [length]\n  );\n\n  const isCodeRegex = new RegExp(`^[0-9]{${length}}$`);\n\n  const getItem = (index: number) => itemsRef[index].current!;\n  const focusItem = (index: number): void => getItem(index).focus();\n  const blurItem = (index: number): void => getItem(index).blur();\n\n  const onItemFocus = (index: number) => () => {\n    setActiveIndex(index);\n    if (codeInputRef.current) codeInputRef.current.focus();\n  };\n\n  const onItemKeyUp = ({ key, keyCode }: React.KeyboardEvent) => {\n    const newValue = [...value];\n    const nextIndex = activeIndex + 1;\n    const prevIndex = activeIndex - 1;\n\n    const isLast = nextIndex === length;\n    const isDeleting =\n      keyCode === KEY_CODE.DELETE || keyCode === KEY_CODE.BACKSPACE;\n\n    // keep items focus in sync\n    onItemFocus(activeIndex);\n\n    // on delete, replace the current value\n    // and focus on the previous item\n    if (isDeleting) {\n      newValue[activeIndex] = placeholder;\n      setValue(newValue);\n\n      if (activeIndex > 0) {\n        setActiveIndex(prevIndex);\n        focusItem(prevIndex);\n      }\n\n      return;\n    }\n\n    // if the key pressed is not a number\n    // don't do anything\n    if (Number.isNaN(+key)) return;\n\n    // reset the current value\n    // and set the new one\n    if (codeInputRef.current) codeInputRef.current.value = '';\n    newValue[activeIndex] = key;\n    setValue(newValue);\n\n    if (!isLast) {\n      setActiveIndex(nextIndex);\n      focusItem(nextIndex);\n      return;\n    }\n\n    if (codeInputRef.current) codeInputRef.current.blur();\n    getItem(activeIndex).blur();\n    setActiveIndex(-1);\n  };\n\n  const onItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const { value: changeValue } = e.target;\n    const isCode = isCodeRegex.test(changeValue);\n\n    if (!isCode) return;\n    setValue(changeValue.split(''));\n    blurItem(activeIndex);\n  };\n\n  React.useEffect(() => {\n    const onDocumentClick = (e: MouseEvent) => {\n      const targetIncludesContainer = e.composedPath().reduce(\n        (bool: boolean, path: EventTarget) =>\n          bool ||\n          // @to-do: find which type to use\n          // to make it compatible with dataset\n          // @ts-ignore\n          path.dataset.reactInputVerificationCodeId === CONTAINER_DATA_ID,\n        false\n      );\n\n      if (!targetIncludesContainer) setActiveIndex(-1);\n    };\n\n    document.addEventListener('click', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('click', onDocumentClick);\n    };\n  }, []);\n\n  return (\n    <div\n      data-react-input-verification-code-id={CONTAINER_DATA_ID}\n      className='ReactInputVerificationCode__container'\n      style={\n        {\n          '--activeIndex': activeIndex,\n          '--itemsCount': length,\n          '--itemWidth': '4.5rem',\n          '--itemHeight': '5rem',\n          '--itemSpacing': '1rem',\n        } as React.CSSProperties\n      }\n    >\n      <input\n        ref={codeInputRef}\n        className='ReactInputVerificationCode__input'\n        autoComplete='one-time-code'\n        type='text'\n        inputMode='decimal'\n        id='one-time-code'\n        // use onKeyUp rather than onChange for a better control\n        // onChange is still needed to handle the autocompletion\n        // when receiving a code by SMS\n        onChange={onItemChange}\n        onKeyUp={onItemKeyUp}\n      />\n\n      {itemsRef.map((ref, i) => (\n        <div\n          key={i}\n          ref={ref}\n          role='button'\n          tabIndex={0}\n          className={`ReactInputVerificationCode__item ${\n            activeIndex === i ? 'is-active' : ''\n          }`}\n          onFocus={onItemFocus(i)}\n        >\n          {value[i] || placeholder}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["KEY_CODE","BACKSPACE","ARROW_LEFT","ARROW_RIGHT","DELETE","CONTAINER_DATA_ID","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onItemKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onItemChange","e","changeValue","target","isCode","test","split","onDocumentClick","targetIncludesContainer","composedPath","reduce","bool","path","dataset","reactInputVerificationCodeId","document","addEventListener","removeEventListener","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","i","role","tabIndex","onFocus"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport './index.css';\n\nconst KEY_CODE = {\n  BACKSPACE: 8,\n  ARROW_LEFT: 37,\n  ARROW_RIGHT: 39,\n  DELETE: 46,\n};\n\nconst CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';\n\nexport default ({ length = 4, placeholder = '·' }) => {\n  const [activeIndex, setActiveIndex] = React.useState<number>(-1);\n  const [value, setValue] = React.useState<string[]>(\n    new Array(length).fill(placeholder)\n  );\n\n  const codeInputRef = React.createRef<HTMLInputElement>();\n  const itemsRef = React.useMemo(\n    () => [...new Array(length)].map(() => React.createRef<HTMLDivElement>()),\n    [length]\n  );\n\n  const isCodeRegex = new RegExp(`^[0-9]{${length}}$`);\n\n  const getItem = (index: number) => itemsRef[index].current!;\n  const focusItem = (index: number): void => getItem(index).focus();\n  const blurItem = (index: number): void => getItem(index).blur();\n\n  const onItemFocus = (index: number) => () => {\n    setActiveIndex(index);\n    if (codeInputRef.current) codeInputRef.current.focus();\n  };\n\n  const onItemKeyUp = ({ key, keyCode }: React.KeyboardEvent) => {\n    const newValue = [...value];\n    const nextIndex = activeIndex + 1;\n    const prevIndex = activeIndex - 1;\n\n    const isLast = nextIndex === length;\n    const isDeleting =\n      keyCode === KEY_CODE.DELETE || keyCode === KEY_CODE.BACKSPACE;\n\n    // keep items focus in sync\n    onItemFocus(activeIndex);\n\n    // on delete, replace the current value\n    // and focus on the previous item\n    if (isDeleting) {\n      newValue[activeIndex] = placeholder;\n      setValue(newValue);\n\n      if (activeIndex > 0) {\n        setActiveIndex(prevIndex);\n        focusItem(prevIndex);\n      }\n\n      return;\n    }\n\n    // if the key pressed is not a number\n    // don't do anything\n    if (Number.isNaN(+key)) return;\n\n    // reset the current value\n    // and set the new one\n    if (codeInputRef.current) codeInputRef.current.value = '';\n    newValue[activeIndex] = key;\n    setValue(newValue);\n\n    if (!isLast) {\n      setActiveIndex(nextIndex);\n      focusItem(nextIndex);\n      return;\n    }\n\n    if (codeInputRef.current) codeInputRef.current.blur();\n    getItem(activeIndex).blur();\n    setActiveIndex(-1);\n  };\n\n  const onItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const { value: changeValue } = e.target;\n    const isCode = isCodeRegex.test(changeValue);\n\n    if (!isCode) return;\n    setValue(changeValue.split(''));\n    blurItem(activeIndex);\n  };\n\n  React.useEffect(() => {\n    const onDocumentClick = (e: MouseEvent) => {\n      const targetIncludesContainer = e.composedPath().reduce(\n        (bool: boolean, path: EventTarget) =>\n          bool ||\n          // @to-do: find which type to use\n          // to make it compatible with dataset\n          // @ts-ignore\n          path.dataset?.reactInputVerificationCodeId === CONTAINER_DATA_ID,\n        false\n      );\n\n      if (!targetIncludesContainer) setActiveIndex(-1);\n    };\n\n    document.addEventListener('click', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('click', onDocumentClick);\n    };\n  }, []);\n\n  return (\n    <div\n      data-react-input-verification-code-id={CONTAINER_DATA_ID}\n      className='ReactInputVerificationCode__container'\n      style={\n        {\n          '--activeIndex': activeIndex,\n          '--itemsCount': length,\n          '--itemWidth': '4.5rem',\n          '--itemHeight': '5rem',\n          '--itemSpacing': '1rem',\n        } as React.CSSProperties\n      }\n    >\n      <input\n        ref={codeInputRef}\n        className='ReactInputVerificationCode__input'\n        autoComplete='one-time-code'\n        type='text'\n        inputMode='decimal'\n        id='one-time-code'\n        // use onKeyUp rather than onChange for a better control\n        // onChange is still needed to handle the autocompletion\n        // when receiving a code by SMS\n        onChange={onItemChange}\n        onKeyUp={onItemKeyUp}\n      />\n\n      {itemsRef.map((ref, i) => (\n        <div\n          key={i}\n          ref={ref}\n          role='button'\n          tabIndex={0}\n          className={`ReactInputVerificationCode__item ${\n            activeIndex === i ? 'is-active' : ''\n          }`}\n          onFocus={onItemFocus(i)}\n        >\n          {value[i] || placeholder}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["KEY_CODE","BACKSPACE","ARROW_LEFT","ARROW_RIGHT","DELETE","CONTAINER_DATA_ID","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onItemKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onItemChange","e","changeValue","target","isCode","test","split","onDocumentClick","targetIncludesContainer","composedPath","reduce","bool","path","dataset","reactInputVerificationCodeId","document","addEventListener","removeEventListener","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","i","role","tabIndex","onFocus"],"mappings":"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"}

dist/index.modern.js

@@ -99,3 +99,5 @@ import { useState, createRef, useMemo, useEffect, createElement } from 'react';
       var targetIncludesContainer = e.composedPath().reduce(function (bool, path) {
-        return bool || path.dataset.reactInputVerificationCodeId === CONTAINER_DATA_ID;
+        var _path$dataset;
+
+        return bool || ((_path$dataset = path.dataset) === null || _path$dataset === void 0 ? void 0 : _path$dataset.reactInputVerificationCodeId) === CONTAINER_DATA_ID;
       }, false);
@@ -102,0 +104,0 @@ if (!targetIncludesContainer) setActiveIndex(-1);

dist/index.modern.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport './index.css';\n\nconst KEY_CODE = {\n  BACKSPACE: 8,\n  ARROW_LEFT: 37,\n  ARROW_RIGHT: 39,\n  DELETE: 46,\n};\n\nconst CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';\n\nexport default ({ length = 4, placeholder = '·' }) => {\n  const [activeIndex, setActiveIndex] = React.useState<number>(-1);\n  const [value, setValue] = React.useState<string[]>(\n    new Array(length).fill(placeholder)\n  );\n\n  const codeInputRef = React.createRef<HTMLInputElement>();\n  const itemsRef = React.useMemo(\n    () => [...new Array(length)].map(() => React.createRef<HTMLDivElement>()),\n    [length]\n  );\n\n  const isCodeRegex = new RegExp(`^[0-9]{${length}}$`);\n\n  const getItem = (index: number) => itemsRef[index].current!;\n  const focusItem = (index: number): void => getItem(index).focus();\n  const blurItem = (index: number): void => getItem(index).blur();\n\n  const onItemFocus = (index: number) => () => {\n    setActiveIndex(index);\n    if (codeInputRef.current) codeInputRef.current.focus();\n  };\n\n  const onItemKeyUp = ({ key, keyCode }: React.KeyboardEvent) => {\n    const newValue = [...value];\n    const nextIndex = activeIndex + 1;\n    const prevIndex = activeIndex - 1;\n\n    const isLast = nextIndex === length;\n    const isDeleting =\n      keyCode === KEY_CODE.DELETE || keyCode === KEY_CODE.BACKSPACE;\n\n    // keep items focus in sync\n    onItemFocus(activeIndex);\n\n    // on delete, replace the current value\n    // and focus on the previous item\n    if (isDeleting) {\n      newValue[activeIndex] = placeholder;\n      setValue(newValue);\n\n      if (activeIndex > 0) {\n        setActiveIndex(prevIndex);\n        focusItem(prevIndex);\n      }\n\n      return;\n    }\n\n    // if the key pressed is not a number\n    // don't do anything\n    if (Number.isNaN(+key)) return;\n\n    // reset the current value\n    // and set the new one\n    if (codeInputRef.current) codeInputRef.current.value = '';\n    newValue[activeIndex] = key;\n    setValue(newValue);\n\n    if (!isLast) {\n      setActiveIndex(nextIndex);\n      focusItem(nextIndex);\n      return;\n    }\n\n    if (codeInputRef.current) codeInputRef.current.blur();\n    getItem(activeIndex).blur();\n    setActiveIndex(-1);\n  };\n\n  const onItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const { value: changeValue } = e.target;\n    const isCode = isCodeRegex.test(changeValue);\n\n    if (!isCode) return;\n    setValue(changeValue.split(''));\n    blurItem(activeIndex);\n  };\n\n  React.useEffect(() => {\n    const onDocumentClick = (e: MouseEvent) => {\n      const targetIncludesContainer = e.composedPath().reduce(\n        (bool: boolean, path: EventTarget) =>\n          bool ||\n          // @to-do: find which type to use\n          // to make it compatible with dataset\n          // @ts-ignore\n          path.dataset.reactInputVerificationCodeId === CONTAINER_DATA_ID,\n        false\n      );\n\n      if (!targetIncludesContainer) setActiveIndex(-1);\n    };\n\n    document.addEventListener('click', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('click', onDocumentClick);\n    };\n  }, []);\n\n  return (\n    <div\n      data-react-input-verification-code-id={CONTAINER_DATA_ID}\n      className='ReactInputVerificationCode__container'\n      style={\n        {\n          '--activeIndex': activeIndex,\n          '--itemsCount': length,\n          '--itemWidth': '4.5rem',\n          '--itemHeight': '5rem',\n          '--itemSpacing': '1rem',\n        } as React.CSSProperties\n      }\n    >\n      <input\n        ref={codeInputRef}\n        className='ReactInputVerificationCode__input'\n        autoComplete='one-time-code'\n        type='text'\n        inputMode='decimal'\n        id='one-time-code'\n        // use onKeyUp rather than onChange for a better control\n        // onChange is still needed to handle the autocompletion\n        // when receiving a code by SMS\n        onChange={onItemChange}\n        onKeyUp={onItemKeyUp}\n      />\n\n      {itemsRef.map((ref, i) => (\n        <div\n          key={i}\n          ref={ref}\n          role='button'\n          tabIndex={0}\n          className={`ReactInputVerificationCode__item ${\n            activeIndex === i ? 'is-active' : ''\n          }`}\n          onFocus={onItemFocus(i)}\n        >\n          {value[i] || placeholder}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["KEY_CODE","BACKSPACE","ARROW_LEFT","ARROW_RIGHT","DELETE","CONTAINER_DATA_ID","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onItemKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onItemChange","e","changeValue","target","isCode","test","split","onDocumentClick","targetIncludesContainer","composedPath","reduce","bool","path","dataset","reactInputVerificationCodeId","document","addEventListener","removeEventListener","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","i","role","tabIndex","onFocus"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport './index.css';\n\nconst KEY_CODE = {\n  BACKSPACE: 8,\n  ARROW_LEFT: 37,\n  ARROW_RIGHT: 39,\n  DELETE: 46,\n};\n\nconst CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';\n\nexport default ({ length = 4, placeholder = '·' }) => {\n  const [activeIndex, setActiveIndex] = React.useState<number>(-1);\n  const [value, setValue] = React.useState<string[]>(\n    new Array(length).fill(placeholder)\n  );\n\n  const codeInputRef = React.createRef<HTMLInputElement>();\n  const itemsRef = React.useMemo(\n    () => [...new Array(length)].map(() => React.createRef<HTMLDivElement>()),\n    [length]\n  );\n\n  const isCodeRegex = new RegExp(`^[0-9]{${length}}$`);\n\n  const getItem = (index: number) => itemsRef[index].current!;\n  const focusItem = (index: number): void => getItem(index).focus();\n  const blurItem = (index: number): void => getItem(index).blur();\n\n  const onItemFocus = (index: number) => () => {\n    setActiveIndex(index);\n    if (codeInputRef.current) codeInputRef.current.focus();\n  };\n\n  const onItemKeyUp = ({ key, keyCode }: React.KeyboardEvent) => {\n    const newValue = [...value];\n    const nextIndex = activeIndex + 1;\n    const prevIndex = activeIndex - 1;\n\n    const isLast = nextIndex === length;\n    const isDeleting =\n      keyCode === KEY_CODE.DELETE || keyCode === KEY_CODE.BACKSPACE;\n\n    // keep items focus in sync\n    onItemFocus(activeIndex);\n\n    // on delete, replace the current value\n    // and focus on the previous item\n    if (isDeleting) {\n      newValue[activeIndex] = placeholder;\n      setValue(newValue);\n\n      if (activeIndex > 0) {\n        setActiveIndex(prevIndex);\n        focusItem(prevIndex);\n      }\n\n      return;\n    }\n\n    // if the key pressed is not a number\n    // don't do anything\n    if (Number.isNaN(+key)) return;\n\n    // reset the current value\n    // and set the new one\n    if (codeInputRef.current) codeInputRef.current.value = '';\n    newValue[activeIndex] = key;\n    setValue(newValue);\n\n    if (!isLast) {\n      setActiveIndex(nextIndex);\n      focusItem(nextIndex);\n      return;\n    }\n\n    if (codeInputRef.current) codeInputRef.current.blur();\n    getItem(activeIndex).blur();\n    setActiveIndex(-1);\n  };\n\n  const onItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const { value: changeValue } = e.target;\n    const isCode = isCodeRegex.test(changeValue);\n\n    if (!isCode) return;\n    setValue(changeValue.split(''));\n    blurItem(activeIndex);\n  };\n\n  React.useEffect(() => {\n    const onDocumentClick = (e: MouseEvent) => {\n      const targetIncludesContainer = e.composedPath().reduce(\n        (bool: boolean, path: EventTarget) =>\n          bool ||\n          // @to-do: find which type to use\n          // to make it compatible with dataset\n          // @ts-ignore\n          path.dataset?.reactInputVerificationCodeId === CONTAINER_DATA_ID,\n        false\n      );\n\n      if (!targetIncludesContainer) setActiveIndex(-1);\n    };\n\n    document.addEventListener('click', onDocumentClick);\n\n    return () => {\n      document.removeEventListener('click', onDocumentClick);\n    };\n  }, []);\n\n  return (\n    <div\n      data-react-input-verification-code-id={CONTAINER_DATA_ID}\n      className='ReactInputVerificationCode__container'\n      style={\n        {\n          '--activeIndex': activeIndex,\n          '--itemsCount': length,\n          '--itemWidth': '4.5rem',\n          '--itemHeight': '5rem',\n          '--itemSpacing': '1rem',\n        } as React.CSSProperties\n      }\n    >\n      <input\n        ref={codeInputRef}\n        className='ReactInputVerificationCode__input'\n        autoComplete='one-time-code'\n        type='text'\n        inputMode='decimal'\n        id='one-time-code'\n        // use onKeyUp rather than onChange for a better control\n        // onChange is still needed to handle the autocompletion\n        // when receiving a code by SMS\n        onChange={onItemChange}\n        onKeyUp={onItemKeyUp}\n      />\n\n      {itemsRef.map((ref, i) => (\n        <div\n          key={i}\n          ref={ref}\n          role='button'\n          tabIndex={0}\n          className={`ReactInputVerificationCode__item ${\n            activeIndex === i ? 'is-active' : ''\n          }`}\n          onFocus={onItemFocus(i)}\n        >\n          {value[i] || placeholder}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["KEY_CODE","BACKSPACE","ARROW_LEFT","ARROW_RIGHT","DELETE","CONTAINER_DATA_ID","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onItemKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onItemChange","e","changeValue","target","isCode","test","split","onDocumentClick","targetIncludesContainer","composedPath","reduce","bool","path","dataset","reactInputVerificationCodeId","document","addEventListener","removeEventListener","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","i","role","tabIndex","onFocus"],"mappings":"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"}

package.json

 {
   "name": "react-input-verification-code",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A verification code input, autocompletion friendly",
@@ -5,0 +5,0 @@ "author": "ugogo",

No alert changes

Improved metrics

Total package byte prevSize

31168

0.8%

Lines of code

294

0.68%

No dependency changes