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

Comparing version 0.1.4 to 0.2.0

dist/index.js

@@ -9,3 +9,2 @@ var React = require('react');
 };
-var CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';
 var index = (function (_ref) {
@@ -52,3 +51,3 @@ var _ref$length = _ref.length,
 
-  var onItemKeyUp = function onItemKeyUp(_ref2) {
+  var onInputKeyUp = function onInputKeyUp(_ref2) {
     var key = _ref2.key,
@@ -90,3 +89,3 @@ keyCode = _ref2.keyCode;
 
-  var onItemChange = function onItemChange(e) {
+  var onInputChange = function onInputChange(e) {
     var changeValue = e.target.value;
@@ -99,19 +98,8 @@ var isCode = isCodeRegex.test(changeValue);
 
-  React.useEffect(function () {
-    var onDocumentClick = function onDocumentClick(e) {
-      var targetIncludesContainer = e.composedPath().reduce(function (bool, path) {
-        var _path$dataset;
+  var onInputBlur = function onInputBlur() {
+    setActiveIndex(-1);
+    blurItem(activeIndex);
+  };
 
-        return bool || ((_path$dataset = path.dataset) === null || _path$dataset === void 0 ? void 0 : _path$dataset.reactInputVerificationCodeId) === CONTAINER_DATA_ID;
-      }, false);
-      if (!targetIncludesContainer) setActiveIndex(-1);
-    };
-
-    document.addEventListener('click', onDocumentClick);
-    return function () {
-      document.removeEventListener('click', onDocumentClick);
-    };
-  }, []);
   return React.createElement("div", {
-    "data-react-input-verification-code-id": CONTAINER_DATA_ID,
     className: 'ReactInputVerificationCode__container',
@@ -132,4 +120,5 @@ style: {
     id: 'one-time-code',
-    onChange: onItemChange,
-    onKeyUp: onItemKeyUp
+    onChange: onInputChange,
+    onKeyUp: onInputKeyUp,
+    onBlur: onInputBlur
   }), itemsRef.map(function (ref, i) {
@@ -136,0 +125,0 @@ return React.createElement("div", {

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    () =>\n      new Array(length).fill(null).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\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    () =>\n      new Array(length).fill(null).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 onInputKeyUp = ({ 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 onInputChange = (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  const onInputBlur = () => {\n    setActiveIndex(-1);\n    blurItem(activeIndex);\n  };\n\n  return (\n    <div\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={onInputChange}\n        onKeyUp={onInputKeyUp}\n        onBlur={onInputBlur}\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","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onInputKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onInputChange","e","changeValue","target","isCode","test","split","onInputBlur","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","onBlur","i","role","tabIndex","onFocus"],"mappings":"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"}

dist/index.modern.js

@@ -1,2 +0,2 @@
-import { useState, createRef, useMemo, useEffect, createElement } from 'react';
+import { useState, createRef, useMemo, createElement } from 'react';
 
@@ -9,3 +9,2 @@ var KEY_CODE = {
 };
-var CONTAINER_DATA_ID = 'REACT_VERIFICATION_CODE_CONTAINER';
 var index = (function (_ref) {
@@ -52,3 +51,3 @@ var _ref$length = _ref.length,
 
-  var onItemKeyUp = function onItemKeyUp(_ref2) {
+  var onInputKeyUp = function onInputKeyUp(_ref2) {
     var key = _ref2.key,
@@ -90,3 +89,3 @@ keyCode = _ref2.keyCode;
 
-  var onItemChange = function onItemChange(e) {
+  var onInputChange = function onInputChange(e) {
     var changeValue = e.target.value;
@@ -99,19 +98,8 @@ var isCode = isCodeRegex.test(changeValue);
 
-  useEffect(function () {
-    var onDocumentClick = function onDocumentClick(e) {
-      var targetIncludesContainer = e.composedPath().reduce(function (bool, path) {
-        var _path$dataset;
+  var onInputBlur = function onInputBlur() {
+    setActiveIndex(-1);
+    blurItem(activeIndex);
+  };
 
-        return bool || ((_path$dataset = path.dataset) === null || _path$dataset === void 0 ? void 0 : _path$dataset.reactInputVerificationCodeId) === CONTAINER_DATA_ID;
-      }, false);
-      if (!targetIncludesContainer) setActiveIndex(-1);
-    };
-
-    document.addEventListener('click', onDocumentClick);
-    return function () {
-      document.removeEventListener('click', onDocumentClick);
-    };
-  }, []);
   return createElement("div", {
-    "data-react-input-verification-code-id": CONTAINER_DATA_ID,
     className: 'ReactInputVerificationCode__container',
@@ -132,4 +120,5 @@ style: {
     id: 'one-time-code',
-    onChange: onItemChange,
-    onKeyUp: onItemKeyUp
+    onChange: onInputChange,
+    onKeyUp: onInputKeyUp,
+    onBlur: onInputBlur
   }), itemsRef.map(function (ref, i) {
@@ -136,0 +125,0 @@ return createElement("div", {

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    () =>\n      new Array(length).fill(null).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\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    () =>\n      new Array(length).fill(null).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 onInputKeyUp = ({ 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 onInputChange = (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  const onInputBlur = () => {\n    setActiveIndex(-1);\n    blurItem(activeIndex);\n  };\n\n  return (\n    <div\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={onInputChange}\n        onKeyUp={onInputKeyUp}\n        onBlur={onInputBlur}\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","length","placeholder","React","activeIndex","setActiveIndex","Array","fill","value","setValue","codeInputRef","itemsRef","map","isCodeRegex","RegExp","getItem","index","current","focusItem","focus","blurItem","blur","onItemFocus","onInputKeyUp","key","keyCode","newValue","nextIndex","prevIndex","isLast","isDeleting","Number","isNaN","onInputChange","e","changeValue","target","isCode","test","split","onInputBlur","className","style","ref","autoComplete","type","inputMode","id","onChange","onKeyUp","onBlur","i","role","tabIndex","onFocus"],"mappings":"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"}

package.json

 {
   "name": "react-input-verification-code",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A verification code input, autocompletion friendly",
@@ -30,2 +30,4 @@ "author": "ugogo",
     "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
+    "start:playground": "npm start --prefix playground",
+    "dev": "run-p start start:playground",
     "prepare": "run-s build",
@@ -37,4 +39,2 @@ "test": "run-s test:unit test:lint test:build",
     "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build",
     "release": "npm run test && npm run prepare && dotenv release-it"
@@ -41,0 +41,0 @@ },

README.md

@@ -9,3 +9,8 @@ # react-input-verification-code
 
-- Basic - [CodeSandbox](https://codesandbox.io/s/basic-6ejdp) - [Source](https://github.com/ugogo/react-input-verification-code/tree/master/example/src/Basic.tsx)
+- Basic
+  - [CodeSandbox](https://codesandbox.io/s/basic-6ejdp)
+  - [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/basic/src/index.tsx)
+- Custom Styles
+  - [CodeSandbox](https://codesandbox.io/s/custom-styles-bw8s4)
+  - [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/custom-styles/src/index.tsx)
 
@@ -36,6 +41,6 @@ ## Install
 
-| Key         | Type      | Default | Description                     |
-| ----------- | --------- | ------- | ------------------------------- |
-| length      | `number`  | `4`     | How many items will be rendered |
-| placeholder | `Element` | `·`     | Element rendered when no value  |
+| Key         | Type     | Default | Description                                               |
+| ----------- | -------- | ------- | --------------------------------------------------------- |
+| length      | `number` | `4`     | How many items will be rendered                           |
+| placeholder | `string` | `·`     | String rendered in each item when no value has been typed |
 
@@ -42,0 +47,0 @@ ## License

No alert changes

Improved metrics

Number of lines in readme file

48

11.63%

Worsened metrics

Total package byte prevSize

28044

-10.64%

Lines of code

274

-6.8%

No dependency changes