├── docs ├── .nojekyll ├── _next │ └── static │ │ ├── T4MqIVG0oemQKLzb3fRGP │ │ ├── _ssgManifest.js │ │ └── _buildManifest.js │ │ └── chunks │ │ ├── pages │ │ ├── _error-8353112a01355ec2.js │ │ ├── _app-00abc3efdcbf2bff.js │ │ ├── API-0d1bbfef6ad20b6c.js │ │ ├── migration │ │ │ ├── v4-cce206f1622a8b9d.js │ │ │ ├── v3-6e4cbdad9fc8eb9f.js │ │ │ └── v2-d4a45e77baa8d2d6.js │ │ └── styling-0d6fd8cb44171d2d.js │ │ ├── webpack-a75dfb0dcf3ea940.js │ │ ├── nextra-data-en-US.json │ │ └── 781-bf07540ab58ff368.js └── 404.html ├── docs-src ├── .gitignore ├── pages │ ├── migration │ │ ├── _meta.json │ │ ├── v4.mdx │ │ ├── v3.mdx │ │ └── v2.mdx │ ├── _meta.json │ ├── _app.js │ ├── API.mdx │ ├── styles.css │ ├── styling.mdx │ └── index.mdx ├── next.config.js ├── package.json ├── components │ └── Section.jsx └── theme.config.js ├── .gitignore ├── src ├── setupTests.js ├── index.d.ts ├── styles.css ├── index.js └── verification-input.test.js ├── jest.config.js ├── .github └── workflows │ ├── lint-and-test.yml │ ├── publish-release.yml │ ├── prepare-release.yml │ ├── prepare-beta-release.yml │ └── codeql-analysis.yml ├── webpack.config.js ├── .babelrc ├── LICENSE ├── CONTRIBUTING.md ├── eslint.config.js ├── package.json └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs-src/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | yarn-error.log 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | /node_modules 4 | /coverage 5 | /lib 6 | -------------------------------------------------------------------------------- /docs-src/pages/migration/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "v4": "", 3 | "v3": "", 4 | "v2": "" 5 | } 6 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | import "regenerator-runtime/runtime"; 3 | -------------------------------------------------------------------------------- /docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_ssgManifest.js: -------------------------------------------------------------------------------- 1 | self.__SSG_MANIFEST=new Set,self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB(); -------------------------------------------------------------------------------- /docs-src/pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": "Demo", 3 | "API": "API", 4 | "styling": "Styling", 5 | "migration": "Migration Guide" 6 | } 7 | -------------------------------------------------------------------------------- /docs-src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import "nextra-theme-docs/style.css"; 2 | import "./styles.css"; 3 | 4 | export default function Nextra({ Component, pageProps }) { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | moduleNameMapper: { 3 | "^.+\\.(css|less|scss)$": "babel-jest", 4 | }, 5 | setupFilesAfterEnv: ["/src/setupTests.js"], 6 | testEnvironment: "jsdom", 7 | }; 8 | -------------------------------------------------------------------------------- /docs-src/pages/API.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "API" 3 | --- 4 | 5 | import Readme from "../../README.md"; 6 | import Section from "../components/Section.jsx"; 7 | 8 | # API 9 | 10 |
11 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/_error-8353112a01355ec2.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[820],{1981:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return u(67)}])}},function(n){n.O(0,[774,888,179],function(){return n(n.s=1981)}),_N_E=n.O()}]); -------------------------------------------------------------------------------- /docs-src/next.config.js: -------------------------------------------------------------------------------- 1 | const withNextra = require("nextra")({ 2 | theme: "nextra-theme-docs", 3 | themeConfig: "./theme.config.js", 4 | }); 5 | module.exports = withNextra({ 6 | eslint: { 7 | ignoreDuringBuilds: true, 8 | }, 9 | basePath: process.env.BASE_PATH ?? "", 10 | images: { 11 | unoptimized: true, 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /docs-src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rvi-docs", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "next" 8 | }, 9 | "dependencies": { 10 | "next": "^13.0.0", 11 | "nextra": "^2.0.0", 12 | "nextra-theme-docs": "^2.0.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/_app-00abc3efdcbf2bff.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{1118:function(n,u,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return t(8484)}])},8484:function(n,u,t){"use strict";t.r(u),t.d(u,{default:function(){return c}});var r=t(5893);function c(n){let{Component:u,pageProps:t}=n;return(0,r.jsx)(u,{...t})}t(5513),t(6258)},5513:function(){},6258:function(){}},function(n){var u=function(u){return n(n.s=u)};n.O(0,[774,179],function(){return u(1118),u(880)}),_N_E=n.O()}]); -------------------------------------------------------------------------------- /.github/workflows/lint-and-test.yml: -------------------------------------------------------------------------------- 1 | name: Lint and Test 2 | 3 | on: 4 | pull_request: 5 | 6 | push: 7 | branches: 8 | - master 9 | - develop 10 | 11 | jobs: 12 | lintAndTest: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v2 17 | 18 | - name: Use Node.js ${{ matrix.node-verison }} 19 | uses: actions/setup-node@v1 20 | with: 21 | node-version: '22.x' 22 | 23 | - name: Install dependencies 24 | run: yarn --frozen-lockfile 25 | 26 | - name: Lint 27 | run: yarn lint 28 | 29 | - name: Test 30 | run: yarn test 31 | -------------------------------------------------------------------------------- /docs-src/components/Section.jsx: -------------------------------------------------------------------------------- 1 | export default function Section({ 2 | markdown, 3 | type, 4 | name, 5 | removeHeading = false, 6 | }) { 7 | const md = markdown(); 8 | let fromIndex = md.props.children.findIndex( 9 | (c) => c.props?.children === name 10 | ); 11 | let toIndex = 12 | fromIndex + 13 | 1 + 14 | md.props.children 15 | .slice(fromIndex + 1) 16 | .findIndex((c) => type === (c?.type?.name ?? c?.type)); 17 | 18 | if (toIndex <= fromIndex) { 19 | toIndex = md.props.children.length - 1; 20 | } 21 | 22 | if (removeHeading) { 23 | fromIndex += 1; 24 | } 25 | 26 | return <>{md.props.children.slice(fromIndex, toIndex)}; 27 | } 28 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | import webpack from "webpack"; 3 | import CopyPlugin from "copy-webpack-plugin"; 4 | 5 | export default { 6 | entry: "./src/index.js", 7 | output: { 8 | path: resolve("lib"), 9 | filename: "index.js", 10 | libraryTarget: "commonjs", 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.jsx?$/, 16 | loader: "babel-loader", 17 | exclude: /node_modules/, 18 | }, 19 | { 20 | test: /\.css$/, 21 | use: ["css-loader"], 22 | }, 23 | ], 24 | }, 25 | plugins: [ 26 | new webpack.DefinePlugin({ 27 | "process.env.NODE_ENV": JSON.stringify("production"), 28 | }), 29 | new CopyPlugin({ 30 | patterns: ["src/index.d.ts"], 31 | }), 32 | ], 33 | externals: { 34 | react: "commonjs react", 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /docs/_next/static/T4MqIVG0oemQKLzb3fRGP/_buildManifest.js: -------------------------------------------------------------------------------- 1 | self.__BUILD_MANIFEST=function(s,i){return{__rewrites:{beforeFiles:[],afterFiles:[{source:"/react-verification-input/:path*/_meta",destination:"/react-verification-input/404"}],fallback:[]},"/":[s,"static/chunks/pages/index-00de29c59dd8b4da.js"],"/API":[s,i,"static/chunks/pages/API-0d1bbfef6ad20b6c.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],"/migration/v2":[s,"static/chunks/pages/migration/v2-d4a45e77baa8d2d6.js"],"/migration/v3":[s,"static/chunks/pages/migration/v3-6e4cbdad9fc8eb9f.js"],"/migration/v4":[s,"static/chunks/pages/migration/v4-cce206f1622a8b9d.js"],"/styling":[s,i,"static/chunks/pages/styling-0d6fd8cb44171d2d.js"],sortedPages:["/","/API","/_app","/_error","/migration/v2","/migration/v3","/migration/v4","/styling"]}}("static/chunks/799-4fdf2e1c55cc217b.js","static/chunks/781-bf07540ab58ff368.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | export interface VerificationInputProps { 2 | value?: string; 3 | length?: number; 4 | validChars?: string; 5 | placeholder?: string; 6 | autoFocus?: boolean; 7 | passwordMode?: boolean; 8 | passwordChar?: string; 9 | inputProps?: React.ComponentPropsWithRef<"input">; 10 | containerProps?: React.ComponentPropsWithRef<"div">; 11 | classNames?: { 12 | container?: string; 13 | character?: string; 14 | characterInactive?: string; 15 | characterSelected?: string; 16 | characterFilled?: string; 17 | }; 18 | onChange?: (value: string) => void; 19 | onFocus?: () => void; 20 | onBlur?: () => void; 21 | onComplete?: (value: string) => void; 22 | } 23 | 24 | declare const VerificationInput: React.ForwardRefExoticComponent< 25 | React.PropsWithoutRef & 26 | React.RefAttributes 27 | >; 28 | export default VerificationInput; 29 | -------------------------------------------------------------------------------- /docs-src/pages/migration/v4.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating to Version 4 3 | --- 4 | 5 | # Migrating to Version 4 6 | 7 | This guide is aimed at developers wanting to update from `v3.x.x` to `v4.x.x`. 8 | 9 | Check the following steps one by one and execute the ones that apply to your 10 | situation. 11 | 12 | ## Removed Wrapper Element 13 | 14 | The wrapper element with the class name `.vi_wrapper` was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the `.vi_wrapper` class had to be overridden in a CSS file. 15 | 16 | If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4. 17 | 18 | ```jsx 19 | // v3 20 | 25 | 26 | 27 | 28 | // v4 29 | 30 | ``` 31 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | "@babel/plugin-syntax-dynamic-import", 5 | "@babel/plugin-syntax-import-meta", 6 | "@babel/plugin-proposal-class-properties", 7 | "@babel/plugin-proposal-json-strings", 8 | [ 9 | "@babel/plugin-proposal-decorators", 10 | { 11 | "legacy": true 12 | } 13 | ], 14 | "@babel/plugin-proposal-function-sent", 15 | "@babel/plugin-proposal-export-namespace-from", 16 | "@babel/plugin-proposal-numeric-separator", 17 | "@babel/plugin-proposal-throw-expressions", 18 | "@babel/plugin-proposal-export-default-from", 19 | "@babel/plugin-proposal-logical-assignment-operators", 20 | "@babel/plugin-proposal-optional-chaining", 21 | [ 22 | "@babel/plugin-proposal-pipeline-operator", 23 | { 24 | "proposal": "minimal" 25 | } 26 | ], 27 | "@babel/plugin-proposal-nullish-coalescing-operator", 28 | "@babel/plugin-proposal-do-expressions", 29 | "@babel/plugin-proposal-function-bind" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Andreas Willi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/publish-release.yml: -------------------------------------------------------------------------------- 1 | name: Publish Release 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | publishRelease: 9 | name: Publish release 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | 14 | - name: Use Node.js ${{ matrix.node-verison }} 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: '22.x' 18 | 19 | - name: Install dependencies 20 | run: yarn --frozen-lockfile 21 | 22 | - name: Lint 23 | run: yarn lint 24 | 25 | - name: Test 26 | run: yarn test 27 | 28 | - name: Production build 29 | run: yarn build:prod 30 | 31 | - name: Publish Prerelease to NPM 32 | if: github.event.release.prerelease 33 | uses: JS-DevTools/npm-publish@v1 34 | with: 35 | tag: beta 36 | token: ${{ secrets.NPM_TOKEN }} 37 | 38 | - name: Publish Release to NPM 39 | if: "!github.event.release.prerelease" 40 | uses: JS-DevTools/npm-publish@v1 41 | with: 42 | tag: latest 43 | token: ${{ secrets.NPM_TOKEN }} 44 | -------------------------------------------------------------------------------- /docs-src/pages/migration/v3.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating to Version 3 3 | --- 4 | 5 | # Migrating to Version 3 6 | 7 | This guide is aimed at developers wanting to update from `v2.x.x` to `v3.x.x`. 8 | 9 | Check the following steps one by one and execute the ones that apply to your 10 | situation. 11 | 12 | ## New prop: `containerProps` 13 | 14 | Custom props are no longer forwarded to the container element. Use the new 15 | prop `containerProps` instead and specify the custom props in object literal 16 | form. 17 | 18 | ```jsx 19 | // v2 20 | 23 | 24 | // v3 25 | 30 | ``` 31 | 32 | ## Remove prop: `removeDefaultStyles` 33 | 34 | The `removeDefaultStyles` prop has been removed. Styles are now overridable by 35 | default. Thus this prop can be removed safely. 36 | 37 | ```jsx 38 | // v2 39 | 45 | 46 | // v3 47 | 52 | ``` 53 | -------------------------------------------------------------------------------- /docs-src/pages/styles.css: -------------------------------------------------------------------------------- 1 | .character { 2 | border: none; 3 | font-size: 20px; 4 | border-radius: 8px; 5 | } 6 | 7 | html.light .character { 8 | color: #272729; 9 | background-color: #f6f5fa; 10 | box-shadow: 0 2px 0 #e4e2f5; 11 | } 12 | 13 | html.dark .character { 14 | color: #fff; 15 | background-color: #222; 16 | box-shadow: 0 2px 0 #444; 17 | } 18 | 19 | .cursor_character--selected { 20 | position: relative; 21 | } 22 | 23 | /* optionally hide placeholder (in case it overlaps the cursor) */ 24 | .cursor_character--selected:not(.cursor_character--filled) { 25 | color: transparent; 26 | } 27 | 28 | .cursor_character--selected:not(.cursor_character--filled)::after { 29 | content: ""; 30 | width: 1px; 31 | height: 25px; 32 | background-color: #333; 33 | display: block; 34 | position: absolute; 35 | top: 50%; 36 | left: 50%; 37 | transform: translate(-50%, -50%); 38 | animation: blink 1s infinite step-end; 39 | } 40 | 41 | @keyframes blink { 42 | 0% { 43 | opacity: 1; 44 | } 45 | 50% { 46 | opacity: 0; 47 | } 48 | } 49 | 50 | /* disable tailwind focus indicator */ 51 | .vi.focus-visible { 52 | box-shadow: none; 53 | } 54 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .vi { 2 | top: 0; 3 | right: 0; 4 | bottom: 0; 5 | left: 0; 6 | box-sizing: border-box; 7 | position: absolute; 8 | color: transparent; 9 | background: transparent; 10 | caret-color: transparent; 11 | outline: none; 12 | border: 0 none transparent; 13 | } 14 | 15 | .vi:-webkit-autofill { 16 | opacity: 0; 17 | } 18 | 19 | .vi::-ms-reveal, 20 | .vi::-ms-clear { 21 | display: none; 22 | } 23 | 24 | .vi::selection { 25 | background: transparent; 26 | } 27 | 28 | /* :where() gives the styles specificity 0, which makes them overridable */ 29 | :where(.vi__container) { 30 | position: relative; 31 | display: flex; 32 | gap: 8px; 33 | height: 50px; 34 | width: 300px; 35 | } 36 | 37 | :where(.vi__character) { 38 | height: 100%; 39 | flex-grow: 1; 40 | flex-basis: 0; 41 | text-align: center; 42 | font-size: 36px; 43 | line-height: 50px; 44 | color: black; 45 | background-color: white; 46 | border: 1px solid black; 47 | cursor: default; 48 | user-select: none; 49 | box-sizing: border-box; 50 | } 51 | 52 | :where(.vi__character--inactive) { 53 | color: dimgray; 54 | background-color: lightgray; 55 | } 56 | 57 | :where(.vi__character--selected) { 58 | outline: 2px solid cornflowerblue; 59 | color: cornflowerblue; 60 | } 61 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Workflow 4 | 5 | To work on a new version of `react-verification-input` follow these instructions: 6 | 7 | 1. Create a new branch. Base your work off of the `master` branch, except if you want to release to the `beta` channel first (see [release channels](#release-channels)). In which case you should use the `develop` branch as a base. 8 | 1. Commit and push changes to new branch. 9 | 1. Don't forget to update the README / docs if necessary. 10 | 1. Regenerate docs by running `yarn docs` and commit these changes as well. 11 | 1. Create a pull request to merge from your branch into `master` (or `develop`). 12 | 1. Wait for CI to complete and fix unit tests if they fail. 13 | 1. Add label `release: major`, `release: minor` or `release: patch` depending on the type of release. 14 | 1. Merge pull request, which will start a GitHub Action. If you added a label in the previous step the version number will be bumped accordingly and a release will be drafted. (Nothing will happen if no label was added to the pull request.) 15 | 1. Describe changes in description of release draft. 16 | 1. Publish release, which will start a GitHub Action. The package will be automatically published to NPM on the `latest` (or `beta`) channel. 17 | 18 | ## Release Channels 19 | 20 | On NPM we have two release channels: 21 | 22 | - `latest`: Stable releases, most new features as well as bugfixes will go on this channel. 23 | - `beta`: Experimental releases, can be more unstable. 24 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import globals from "globals"; 2 | import pluginJs from "@eslint/js"; 3 | import pluginReact from "eslint-plugin-react"; 4 | import pluginJest from "eslint-plugin-jest"; 5 | import pluginReactHooks from "eslint-plugin-react-hooks"; 6 | 7 | /** @type {import('eslint').Linter.Config[]} */ 8 | export default [ 9 | { files: ["**/*.{js,mjs,cjs,jsx}"] }, 10 | { languageOptions: { globals: globals.browser } }, 11 | { 12 | settings: { 13 | react: { 14 | version: "detect", 15 | }, 16 | }, 17 | }, 18 | pluginJs.configs.recommended, 19 | pluginReact.configs.flat.recommended, 20 | { 21 | rules: { 22 | "react/prop-types": "off", 23 | }, 24 | }, 25 | { 26 | plugins: { 27 | "react-hooks": pluginReactHooks, 28 | }, 29 | rules: { 30 | "react/react-in-jsx-scope": "off", 31 | ...pluginReactHooks.configs.recommended.rules, 32 | }, 33 | ignores: ["*.test.tsx"], 34 | }, 35 | { 36 | files: ["**/*.spec.js", "**/*.test.js"], 37 | plugins: { jest: pluginJest }, 38 | languageOptions: { 39 | globals: pluginJest.environments.globals.globals, 40 | }, 41 | rules: { 42 | "jest/no-conditional-expect": "error", 43 | "jest/no-disabled-tests": "error", 44 | "jest/no-done-callback": "error", 45 | "jest/no-duplicate-hooks": "error", 46 | "jest/no-focused-tests": "error", 47 | "jest/no-identical-title": "error", 48 | "jest/prefer-todo": "error", 49 | "jest/prefer-to-have-length": "warn", 50 | "jest/valid-expect": "error", 51 | }, 52 | }, 53 | ]; 54 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/API-0d1bbfef6ad20b6c.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[413],{9723:function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/API",function(){return n(3807)}])},3807:function(t,e,n){"use strict";n.r(e),n.d(e,{default:function(){return g.Z}});var i=n(5893),a=n(4526),r=n(7928),o=n(250);n(5513);var d=n(1151);n(5675);var s=n(202),u=n(7870),g=n(2243);function l(t){let e=Object.assign({h1:"h1"},(0,d.ah)(),t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{children:"API"}),"\n",(0,i.jsx)(u.Z,{markdown:s.Z,type:"h2",name:"API Documentation",removeHeading:!0})]})}t=n.hmd(t),(0,a.j)({pageNextRoute:"/API",pageOpts:{filePath:"pages/API.mdx",route:"/API",frontMatter:{title:"API"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"API",id:"api"}],timestamp:1674170361e3,flexsearch:{codeblocks:!0},title:"API"},nextraLayout:r.ZP,themeConfig:o.Z,Content:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,d.ah)(),t.components);return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)},hot:t.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})}},function(t){t.O(0,[799,781,774,888,179],function(){return t(t.s=9723)}),_N_E=t.O()}]); -------------------------------------------------------------------------------- /docs-src/pages/styling.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Styling" 3 | --- 4 | 5 | import VerificationInput from "../../lib/index.js"; 6 | import Readme from "../../README.md"; 7 | import Section from "../components/Section.jsx"; 8 | import { Callout } from "nextra-theme-docs"; 9 | 10 | # Styling 11 | 12 |
13 | 14 |
15 | 16 | ## Example 17 | 18 |
19 | 25 | 26 | ```css 27 | .character { 28 | border: none; 29 | font-size: 20px; 30 | border-radius: 8px; 31 | 32 | /* light theme */ 33 | color: #272729; 34 | background-color: #f6f5fa; 35 | box-shadow: 0 2px 0 #e4e2f5; 36 | 37 | /* dark theme */ 38 | color: #fff; 39 | background-color: #222; 40 | box-shadow: 0 2px 0 #444; 41 | } 42 | ``` 43 | 44 | ## With Cursor (Caret) 45 | 46 |
47 | 54 | 55 | ```css 56 | .character--selected { 57 | position: relative; 58 | } 59 | 60 | /* optionally hide placeholder (in case it overlaps the cursor) */ 61 | .character--selected:not(.character--filled) { 62 | color: transparent; 63 | } 64 | 65 | .character--selected:not(.character--filled)::after { 66 | content: ""; 67 | width: 1px; 68 | height: 25px; 69 | background-color: #333; 70 | display: block; 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | transform: translate(-50%, -50%); 75 | animation: blink 1s infinite step-end; 76 | } 77 | 78 | @keyframes blink { 79 | 0% { 80 | opacity: 1; 81 | } 82 | 50% { 83 | opacity: 0; 84 | } 85 | } 86 | ``` 87 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/webpack-a75dfb0dcf3ea940.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";var e,r,n,t,o={},i={};function u(e){var r=i[e];if(void 0!==r)return r.exports;var n=i[e]={id:e,loaded:!1,exports:{}},t=!0;try{o[e].call(n.exports,n,n.exports,u),t=!1}finally{t&&delete i[e]}return n.loaded=!0,n.exports}u.m=o,e=[],u.O=function(r,n,t,o){if(n){o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[n,t,o];return}for(var c=1/0,i=0;i=o&&Object.keys(u.O).every(function(e){return u.O[e](n[l])})?n.splice(l--,1):(f=!1,o 13 | 14 | 15 | 16 | Default configuration without specifying any props. 17 | 18 | ```jsx copy 19 | 20 | ``` 21 | 22 | ## Numbers only 23 | 24 |
25 | 26 | 27 | 28 | Accept only numbers and use numpad on mobile devices. 29 | 30 | ```jsx copy 31 | 32 | ``` 33 | 34 | ## Password mode 35 | 36 |
37 | 38 | 39 | 40 | Hide the input value. This will also set the input type as `password`. 41 | 42 | ```jsx copy 43 | 44 | ``` 45 | 46 | ## Custom length 47 | 48 |
49 | 50 | 51 | 52 | Configure the input to accept 5 digits. 53 | 54 | ```jsx copy 55 | 56 | ``` 57 | 58 | ## Custom placeholder 59 | 60 |
61 | 62 | 63 | 64 | Use any character as placeholder (empty string for no placeholder). 65 | 66 | ```jsx copy 67 | 68 | ``` 69 | 70 | ## Autofill OTP (iOS) 71 | 72 |
73 | 74 | 75 | 76 | Let iOS read OTP codes from text message notifications (see docs). 79 | 80 | 81 | In order to test this, you need to send a text message containing e.g. `Code: 82 | 123456` to your phone. 83 | 84 | 85 | ```jsx copy 86 | 87 | ``` 88 | -------------------------------------------------------------------------------- /docs-src/pages/migration/v2.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating to Version 2 3 | --- 4 | 5 | # Migrating to Version 2 6 | 7 | This guide is aimed at developers wanting to update from `v0.1.x` to `v2.x.x`. 8 | 9 | Check the following steps one by one and execute the ones that apply to your 10 | situation. 11 | 12 | ## Rename prop: `input` 13 | 14 | The `input` prop has been renamed to `inputProps` in order to be more explicit 15 | about the props being forwarded to the input element. Also, the `onChange` 16 | callback is now available on the top level. This matches the interface of a 17 | regular input element more closely (there is also a new top-level prop 18 | `value`). 19 | 20 | ```jsx 21 | // v0.1.x 22 | 29 | 30 | // v2 31 | 38 | ``` 39 | 40 | ## Remove props: `container`, `inputField`, `characters`, `character` 41 | 42 | These props have been removed. Your custom CSS classes can be passed to the 43 | new `classNames` prop. In order to simplify the component structure, the 44 | `characters` element has been removed, use `container` instead. For more 45 | details see [Styling](/styling). Additional props can no longer be forwarded 46 | to these elements. 47 | 48 | ```jsx 49 | // v0.1.x 50 | 61 | 62 | // v2 63 | 69 | ``` 70 | 71 | ## Remove prop: `getInputRef` 72 | 73 | This callback has been removed. The new way to receive the input ref is to use 74 | the [standard `ref` prop](https://reactjs.org/docs/refs-and-the-dom.html). The 75 | result will be a ref to the actual (invisible) input element. 76 | 77 | ```jsx 78 | // v0.1.x 79 | {myRef = ref}} 81 | /> 82 | 83 | // v2 84 | 87 | ``` 88 | -------------------------------------------------------------------------------- /.github/workflows/prepare-release.yml: -------------------------------------------------------------------------------- 1 | name: Prepare Release 2 | 3 | on: 4 | pull_request: 5 | types: [closed] 6 | branches: 7 | - master 8 | 9 | jobs: 10 | prepareRelease: 11 | name: Prepare release 12 | if: "${{ github.event.pull_request.merged && ( 13 | contains(github.event.pull_request.labels.*.name, 'release: patch') || 14 | contains(github.event.pull_request.labels.*.name, 'release: minor') || 15 | contains(github.event.pull_request.labels.*.name, 'release: major') 16 | ) }}" 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: actions/checkout@v2 20 | with: 21 | ref: ${{ github.event.pull_request.base.ref }} 22 | 23 | - name: Use Node.js ${{ matrix.node-verison }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: '22.x' 27 | 28 | - uses: oleksiyrudenko/gha-git-credentials@v2-latest 29 | with: 30 | token: '${{ secrets.GITHUB_TOKEN }}' 31 | 32 | - name: Bump version to next patch 33 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: patch') }}" 34 | run: npm run bump-patch 35 | 36 | - name: Bump version to next minor 37 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: minor') }}" 38 | run: npm run bump-minor 39 | 40 | - name: Bump version to next major 41 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: major') }}" 42 | run: npm run bump-major 43 | 44 | - name: Push commit and tag 45 | run: git push --follow-tags 46 | 47 | - uses: actions/checkout@v2 48 | with: 49 | ref: develop 50 | fetch-depth: 0 51 | 52 | - name: Merge master -> develop 53 | run: | 54 | git merge origin/master 55 | git push 56 | 57 | - name: Get Latest Tag 58 | id: previoustag 59 | uses: "WyriHaximus/github-action-get-previous-tag@v1" 60 | 61 | - name: Create Release Draft 62 | uses: softprops/action-gh-release@v1 63 | with: 64 | tag_name: ${{ steps.previoustag.outputs.tag }} 65 | draft: true 66 | prerelease: false 67 | env: 68 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 69 | -------------------------------------------------------------------------------- /.github/workflows/prepare-beta-release.yml: -------------------------------------------------------------------------------- 1 | name: Prepare Beta Release 2 | 3 | on: 4 | pull_request: 5 | types: [closed] 6 | branches: 7 | - develop 8 | 9 | jobs: 10 | prepareBetaRelease: 11 | name: Prepare beta release 12 | if: "${{ github.event.pull_request.merged && ( 13 | contains(github.event.pull_request.labels.*.name, 'release: patch') || 14 | contains(github.event.pull_request.labels.*.name, 'release: minor') || 15 | contains(github.event.pull_request.labels.*.name, 'release: major') 16 | ) }}" 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: actions/checkout@v2 20 | with: 21 | ref: ${{ github.event.pull_request.base.ref }} 22 | 23 | - name: Use Node.js ${{ matrix.node-verison }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: '22.x' 27 | 28 | - uses: oleksiyrudenko/gha-git-credentials@v2-latest 29 | with: 30 | token: '${{ secrets.GITHUB_TOKEN }}' 31 | 32 | - name: Extract version 33 | id: extract_version 34 | uses: Saionaro/extract-package-version@v1.0.6 35 | 36 | - name: Bump to next prerelease 37 | if: contains(steps.extract_version.outputs.version, '-') 38 | run: npm run bump-prerelease 39 | 40 | - name: Bump version to next prepatch 41 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: patch') && 42 | !contains(steps.extract_version.outputs.version, '-') }}" 43 | run: npm run bump-prepatch 44 | 45 | - name: Bump version to next preminor 46 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: minor') && 47 | !contains(steps.extract_version.outputs.version, '-') }}" 48 | run: npm run bump-preminor 49 | 50 | - name: Bump version to next premajor 51 | if: "${{ contains(github.event.pull_request.labels.*.name, 'release: major') && 52 | !contains(steps.extract_version.outputs.version, '-') }}" 53 | run: npm run bump-premajor 54 | 55 | - name: Push commit and tag 56 | run: git push --follow-tags 57 | 58 | - name: Get Latest Tag 59 | id: previoustag 60 | uses: "WyriHaximus/github-action-get-previous-tag@v1" 61 | 62 | - name: Create Prerelease Draft 63 | uses: softprops/action-gh-release@v1 64 | with: 65 | tag_name: ${{ steps.previoustag.outputs.tag }} 66 | draft: true 67 | prerelease: true 68 | env: 69 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 70 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master, develop ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master, develop ] 20 | schedule: 21 | - cron: '37 1 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 404: This page could not be found

404

This page could not be found.

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-verification-input", 3 | "version": "4.2.2", 4 | "main": "lib/index.js", 5 | "types": "lib/index.d.ts", 6 | "repository": "https://github.com/andreaswilli/react-verification-input.git", 7 | "description": "Customizable, masked input, which can be used for all sorts of codes.", 8 | "author": "Andreas Willi", 9 | "license": "MIT", 10 | "scripts": { 11 | "build": "webpack", 12 | "build:prod": "webpack --mode=production", 13 | "serve": "webpack --watch --mode=production", 14 | "lint": "eslint src", 15 | "test": "jest --coverage", 16 | "docs": "yarn build:prod && cd docs-src && BASE_PATH=/react-verification-input yarn next build && yarn next export -o ../docs && cd - && touch docs/.nojekyll", 17 | "bump-major": "npm version major", 18 | "bump-minor": "npm version minor", 19 | "bump-patch": "npm version patch", 20 | "bump-premajor": "npm version premajor --preid beta", 21 | "bump-preminor": "npm version preminor --preid beta", 22 | "bump-prepatch": "npm version prepatch --preid beta", 23 | "bump-prerelease": "npm version prerelease --preid beta", 24 | "push-tags": "git push --follow-tags", 25 | "publish-beta": "npm publish --tag beta" 26 | }, 27 | "files": [ 28 | "lib/" 29 | ], 30 | "peerDependencies": { 31 | "react": "16.8.0 - 19.x.x || >=19.0.0-rc", 32 | "react-dom": "16.8.0 - 19.x.x || >=19.0.0-rc" 33 | }, 34 | "devDependencies": { 35 | "@babel/core": "^7.23.2", 36 | "@babel/plugin-proposal-class-properties": "^7.0.0", 37 | "@babel/plugin-proposal-decorators": "^7.23.2", 38 | "@babel/plugin-proposal-do-expressions": "^7.0.0", 39 | "@babel/plugin-proposal-export-default-from": "^7.22.17", 40 | "@babel/plugin-proposal-export-namespace-from": "^7.0.0", 41 | "@babel/plugin-proposal-function-bind": "^7.0.0", 42 | "@babel/plugin-proposal-function-sent": "^7.0.0", 43 | "@babel/plugin-proposal-json-strings": "^7.0.0", 44 | "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0", 45 | "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0", 46 | "@babel/plugin-proposal-numeric-separator": "^7.0.0", 47 | "@babel/plugin-proposal-optional-chaining": "^7.0.0", 48 | "@babel/plugin-proposal-pipeline-operator": "^7.22.15", 49 | "@babel/plugin-proposal-throw-expressions": "^7.0.0", 50 | "@babel/plugin-syntax-dynamic-import": "^7.0.0", 51 | "@babel/plugin-syntax-import-meta": "^7.0.0", 52 | "@babel/preset-env": "^7.23.2", 53 | "@babel/preset-react": "^7.22.15", 54 | "@eslint/js": "^9.16.0", 55 | "@testing-library/jest-dom": "^6.1.4", 56 | "@testing-library/react": "^14.0.0", 57 | "@testing-library/user-event": "^14.5.1", 58 | "babel-core": "^7.0.0-bridge.0", 59 | "babel-jest": "^29.7.0", 60 | "babel-loader": "^9.0.0", 61 | "classnames": "^2.2.5", 62 | "copy-webpack-plugin": "^12.0.2", 63 | "css-loader": "^6.7.1", 64 | "eslint": "^9.16.0", 65 | "eslint-plugin-jest": "^28.9.0", 66 | "eslint-plugin-react": "^7.37.2", 67 | "eslint-plugin-react-hooks": "^5.0.0", 68 | "globals": "^15.12.0", 69 | "jest": "^29.7.0", 70 | "jest-environment-jsdom": "^29.7.0", 71 | "prop-types": "^15.7.2", 72 | "react": "^18.2.0", 73 | "react-dom": "^18.2.0", 74 | "regenerator-runtime": "^0.14.0", 75 | "webpack": "^5.89.0", 76 | "webpack-cli": "^5.0.0" 77 | }, 78 | "dependencies": {} 79 | } 80 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState, useEffect, forwardRef } from "react"; 2 | import classNames from "classnames"; 3 | 4 | import style from "./styles.css"; 5 | 6 | const VerificationInput = forwardRef( 7 | ( 8 | { 9 | value, 10 | length = 6, 11 | validChars = "A-Za-z0-9", 12 | placeholder = "·", 13 | autoFocus = false, 14 | passwordMode = false, 15 | passwordChar = "*", 16 | inputProps = {}, 17 | containerProps = {}, 18 | classNames: classes = {}, 19 | onChange, 20 | onFocus, 21 | onBlur, 22 | onComplete, 23 | }, 24 | ref, 25 | ) => { 26 | const [localValue, setLocalValue] = useState(""); 27 | const [isActive, setActive] = useState(false); 28 | 29 | const inputRef = useRef(null); 30 | 31 | useEffect(() => { 32 | if (autoFocus) { 33 | inputRef.current.focus(); 34 | } 35 | }, [autoFocus]); 36 | 37 | useEffect(() => { 38 | if (inputProps.disabled) { 39 | setActive(false); 40 | } 41 | }, [inputProps.disabled]); 42 | 43 | const handleClick = () => { 44 | inputRef.current.focus(); 45 | }; 46 | 47 | const handleKeyDown = (event) => { 48 | if ( 49 | ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key) 50 | ) { 51 | // do not allow to change cursor position 52 | event.preventDefault(); 53 | } 54 | }; 55 | 56 | const handleInputChange = (event) => { 57 | const newInputVal = event.target.value.replace(/\s/g, ""); 58 | 59 | if (RegExp(`^[${validChars}]{0,${length}}$`).test(newInputVal)) { 60 | onChange?.(newInputVal); 61 | setLocalValue(newInputVal); 62 | 63 | if (newInputVal.length === length) { 64 | onComplete?.(newInputVal); 65 | } 66 | } 67 | }; 68 | 69 | const getValue = () => { 70 | return value ?? localValue; 71 | }; 72 | 73 | const isCharacterSelected = (i) => { 74 | const value = getValue(); 75 | return ( 76 | (value.length === i || (value.length === i + 1 && length === i + 1)) && 77 | isActive 78 | ); 79 | }; 80 | 81 | const isCharacterInactive = (i) => getValue().length < i; 82 | const isCharacterFilled = (i) => getValue().length > i; 83 | 84 | const { 85 | className: inputClassName, 86 | type: inputType, 87 | ...restInputProps 88 | } = inputProps; 89 | const { className: containerClassName, ...restContainerProps } = 90 | containerProps; 91 | 92 | return ( 93 | <> 94 |
inputRef.current.focus()} 102 | {...restContainerProps} 103 | > 104 | { 110 | inputRef.current = node; 111 | if (typeof ref === "function") { 112 | ref(node); 113 | } else if (ref) { 114 | ref.current = node; 115 | } 116 | }} 117 | className={classNames("vi", inputClassName)} 118 | onKeyDown={handleKeyDown} 119 | onFocus={() => { 120 | setActive(true); 121 | onFocus?.(); 122 | }} 123 | onBlur={() => { 124 | setActive(false); 125 | onBlur?.(); 126 | }} 127 | onSelect={(e) => { 128 | const val = e.target.value; 129 | e.target.setSelectionRange(val.length, val.length); 130 | }} 131 | type={passwordMode ? "password" : inputType} 132 | {...restInputProps} 133 | /> 134 | {[...Array(length)].map((_, i) => ( 135 |
153 | {passwordMode && getValue()[i] 154 | ? passwordChar 155 | : getValue()[i] || placeholder} 156 |
157 | ))} 158 |
159 | \n\n\n\n// v4\n"}},"/styling":{"title":"Styling","data":{"":"","example#Example":".character {\nborder: none;\nfont-size: 20px;\nborder-radius: 8px;\n\n/* light theme */\ncolor: #272729;\nbackground-color: #f6f5fa;\nbox-shadow: 0 2px 0 #e4e2f5;\n\n/* dark theme */\ncolor: #fff;\nbackground-color: #222;\nbox-shadow: 0 2px 0 #444;\n}","with-cursor-caret#With Cursor (Caret)":".character--selected {\nposition: relative;\n}\n\n/* optionally hide placeholder (in case it overlaps the cursor) */\n.character--selected:not(.character--filled) {\ncolor: transparent;\n}\n\n.character--selected:not(.character--filled)::after {\ncontent: \"\";\nwidth: 1px;\nheight: 25px;\nbackground-color: #333;\ndisplay: block;\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\nanimation: blink 1s infinite step-end;\n}\n\n@keyframes blink {\n0% {\nopacity: 1;\n}\n50% {\nopacity: 0;\n}\n}"}},"/":{"title":"Demo","data":{"":"","default#Default":"Default configuration without specifying any props.\n","numbers-only#Numbers only":"Accept only numbers and use numpad on mobile devices.\n","password-mode#Password mode":"Hide the input value. This will also set the input type as password.\n","custom-length#Custom length":"Configure the input to accept 5 digits.\n","custom-placeholder#Custom placeholder":"Use any character as placeholder (empty string for no placeholder).\n","autofill-otp-ios#Autofill OTP (iOS)":"Let iOS read OTP codes from text message notifications (see docs).\nIn order to test this, you need to send a text message containing e.g. Code:\n123456 to your phone.\n\n"}},"/migration/v3":{"title":"Migrating to Version 3","data":{"":"This guide is aimed at developers wanting to update from v2.x.x to v3.x.x.Check the following steps one by one and execute the ones that apply to your\nsituation.","new-prop-containerprops#New prop: containerProps":"Custom props are no longer forwarded to the container element. Use the new\nprop containerProps instead and specify the custom props in object literal\nform.\n// v2\n\n\n// v3\n","remove-prop-removedefaultstyles#Remove prop: removeDefaultStyles":"The removeDefaultStyles prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely.\n// v2\n\n\n// v3\n"}}} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo](https://user-images.githubusercontent.com/17298270/184383285-616eaa7c-d911-4203-ad0a-9ddfa32e4e4b.png) 2 | 3 | [![npm](https://img.shields.io/npm/v/react-verification-input?color=orange)](https://www.npmjs.com/package/react-verification-input) 4 | [![npm downloads](https://img.shields.io/npm/dm/react-verification-input.svg?style=flat)](https://www.npmjs.com/package/react-verification-input) 5 | [![Lint and Test](https://github.com/andreaswilli/react-verification-input/actions/workflows/lint-and-test.yml/badge.svg?branch=master)](https://github.com/andreaswilli/react-verification-input/actions/workflows/lint-and-test.yml) 6 | ![npm bundle size](https://img.shields.io/bundlephobia/min/react-verification-input?color=cornflowerblue) 7 | 8 | `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. 9 | 10 | ## Demo 11 | 12 | 🔴 [**Try it out yourself!**](https://andreaswilli.github.io/react-verification-input) 13 | 14 | verification-input 15 | 16 | ## Features 17 | 18 | ⚡ **Get Started Easily**: The component works out of the box without the need to pass it a single prop. 19 | 20 | 🛠 **Highly Configurable**: Change the behaviour of the component to fit your needs by passing [props](#api-documentation). 21 | 22 | 💅🏼 **Custom Styling**: [Customize](#custom-styling) the component's styling to match the look of your application. 23 | 24 | 👨🏼‍💻 **TypeScript Support**: The package contains TypeScript declarations so you can enjoy IntelliSense in your editor. 25 | 26 | ✅ **Compatibility**: Compatible with React 16 (>=16.8.0) up to React 19. Support of new versions of React as they are released will be ensured. 27 | 28 | ## Getting Started 29 | 30 | First, install the package using [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) or [yarn](https://classic.yarnpkg.com/en/docs/cli/add). 31 | 32 | Now, import the React component like this: 33 | 34 | ```js 35 | import VerificationInput from "react-verification-input"; 36 | ``` 37 | 38 | And in your JSX write: 39 | 40 | ```js 41 | 42 | ``` 43 | 44 | That's it! You now have a basic verification input with default configuration rendered on your page. 🎉😃 45 | 46 | The component accepts a variety of props, which allow to configure the component according to your needs. For a complete API overview see [here](#api-documentation). 47 | 48 | ## API Documentation 49 | 50 | 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 `onChange`/`onComplete` props. 51 | 52 | | Option | Type | Default | Description | 53 | | -------------- | -------- | -------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 54 | | value | String | - | The value of the verification input. Behaves like the value prop of a regular input element. This is necessary if the value needs to be changed from the outside (e.g. clearing the value). If you pass this prop, you are responsible to manage the value state. Otherwise the state will be kept inside the component. | 55 | | length | Number | `6` | Number of characters the input should allow. | 56 | | 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. | 57 | | 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 `''`. | 58 | | autoFocus | Boolean | `false` | Focus the input automatically as soon as it is rendered. | 59 | | passwordMode | Boolean | `false` | Hide the input value by displaying `*` instead. | 60 | | passwordChar | String | `'*'` | Custom character to be displayed when `passwordMode` is `true` | 61 | | inputProps | Object | `{}` | The properties of this object get forwarded as props to the input element. In particular, you can use this prop to assign an `id` attribute to the input field to connect it to a `label` element. Use `aria-label` for internationalization of the input field. | 62 | | containerProps | Object | `{}` | The properties of this object get forwarded as props to the container element. | 63 | | classNames | Object | `{}` | Object with CSS class names to add to the specified elements. Supported elements (= object-keys) are `container`, `character`, `characterInactive`, `characterSelected`, `characterFilled` | 64 | | onChange | Function | - | Callback function that gets called with the string value whenever it changes. | 65 | | onComplete | Function | - | Callback function that gets called with the string value when the input is fully filled. | 66 | | onFocus | Function | - | Callback function that gets called when the component obtains focus. | 67 | | onBlur | Function | - | Callback function that gets called when the component loses focus. | 68 | 69 | ## Custom Styling 70 | 71 | Style the input by passing it your custom class names like so: 72 | 73 | ```js 74 | 83 | ``` 84 | 85 | ### Example 86 | 87 | 🔴 [**View live example!**](https://andreaswilli.github.io/react-verification-input/styling) 88 | 89 | ### Component Structure 90 | 91 | The following illustration shows the component structure. 92 | 93 | elements 94 | 95 | ## Contributing 96 | 97 | Contributions welcome ❤️. If you want to contribute, feel free to have a look at the [contribution guide](/CONTRIBUTING.md). 98 | -------------------------------------------------------------------------------- /docs-src/theme.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | project: { 3 | link: "https://github.com/andreaswilli/react-verification-input", 4 | }, 5 | docsRepositoryBase: 6 | "https://github.com/andreaswilli/react-verification-input/tree/master/docs-src", 7 | useNextSeoProps() { 8 | return { 9 | titleTemplate: "%s | react-verification-input", 10 | }; 11 | }, 12 | darkMode: true, 13 | logo: ( 14 | <> 15 | 21 | 27 | 36 | 37 | 41 | 50 | 51 | 55 | 64 | 65 | 69 | 78 | 79 | 83 | 92 | 93 | 94 | 98 | 104 | 105 | 106 | ), 107 | head: ( 108 | <> 109 | 110 | 111 | 115 | 116 | ), 117 | }; 118 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/migration/v4-cce206f1622a8b9d.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[72],{8029:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/migration/v4",function(){return i(9380)}])},250:function(e,t,i){"use strict";var s=i(5893);t.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,s.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,s.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,s.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,s.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,s.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,s.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,s.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,s.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,s.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,s.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,s.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,s.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,s.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,s.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,s.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},9380:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return l.Z}});var s=i(5893),n=i(4526),r=i(7928),o=i(250);i(5513);var a=i(1151);i(5675);var l=i(2243);function C(e){let t=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre",span:"span"},(0,a.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{children:"Migrating to Version 4"}),"\n",(0,s.jsxs)(t.p,{children:["This guide is aimed at developers wanting to update from ",(0,s.jsx)(t.code,{children:"v3.x.x"})," to ",(0,s.jsx)(t.code,{children:"v4.x.x"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"Check the following steps one by one and execute the ones that apply to your\nsituation."}),"\n",(0,s.jsx)(t.h2,{id:"removed-wrapper-element",children:"Removed Wrapper Element"}),"\n",(0,s.jsxs)(t.p,{children:["The wrapper element with the class name ",(0,s.jsx)(t.code,{children:".vi_wrapper"})," was removed. It was inconvenient to style this element with frameworks like Tailwind, since it was not possible to set custom class names. Instead the ",(0,s.jsx)(t.code,{children:".vi_wrapper"})," class had to be overridden in a CSS file."]}),"\n",(0,s.jsx)(t.p,{children:"If you currently rely on this class, this change might break your styling. Styles from the wrapper element should probably be moved to the container element in version 4."}),"\n",(0,s.jsx)(t.pre,{"data-language":"jsx","data-theme":"default",children:(0,s.jsxs)(t.code,{"data-language":"jsx","data-theme":"default",children:[(0,s.jsx)(t.span,{className:"line",children:(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// v3"})}),"\n",(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,s.jsx)(t.span,{className:"line",children:(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:".vi_wrapper {"})}),"\n",(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// your custom styles"})]}),"\n",(0,s.jsx)(t.span,{className:"line",children:(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:""})]}),"\n",(0,s.jsx)(t.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,s.jsx)(t.span,{className:"line",children:" "}),"\n",(0,s.jsx)(t.span,{className:"line",children:(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// v4"})}),"\n",(0,s.jsxs)(t.span,{className:"line",children:[(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"classNames"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{ container"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"custom-class-names"'}),(0,s.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }} />"})]})]})})]})}e=i.hmd(e),(0,n.j)({pageNextRoute:"/migration/v4",pageOpts:{filePath:"pages/migration/v4.mdx",route:"/migration/v4",frontMatter:{title:"Migrating to Version 4"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"Meta",data:{v4:"Migrating to Version 4",v3:"Migrating to Version 3",v2:"Migrating to Version 2"}},{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}},{kind:"MdxPage",name:"v4",route:"/migration/v4",frontMatter:{title:"Migrating to Version 4"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Migrating to Version 4",id:"migrating-to-version-4"},{depth:2,value:"Removed Wrapper Element",id:"removed-wrapper-element"}],flexsearch:{codeblocks:!0},title:"Migrating to Version 4"},nextraLayout:r.ZP,themeConfig:o.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,a.ah)(),e.components);return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(C,{...e})}):C(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})}},function(e){e.O(0,[799,774,888,179],function(){return e(e.s=8029)}),_N_E=e.O()}]); -------------------------------------------------------------------------------- /src/verification-input.test.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | act, 4 | render, 5 | screen, 6 | waitFor, 7 | fireEvent, 8 | } from "@testing-library/react"; 9 | import userEvent from "@testing-library/user-event"; 10 | 11 | import VerificationInput from "./index"; 12 | 13 | describe("VerificationInput", () => { 14 | it("should render 6 empty fields with placeholder", () => { 15 | render(); 16 | 17 | expect(screen.getByTestId("container")).toHaveTextContent(/^······$/); 18 | }); 19 | 20 | it("should change the number of fields", () => { 21 | render(); 22 | 23 | expect(screen.getByTestId("container")).toHaveTextContent(/^····$/); 24 | }); 25 | 26 | it("should change the placeholder", () => { 27 | render(); 28 | 29 | expect(screen.getByTestId("container")).toHaveTextContent(/^______$/); 30 | }); 31 | 32 | it("should allow digits as well as upper- and lowercase letters", async () => { 33 | render(); 34 | 35 | await userEvent.type(screen.getByRole("textbox"), "0aA1bB"); 36 | 37 | expect(screen.getByTestId("container")).toHaveTextContent(/^0aA1bB$/); 38 | }); 39 | 40 | it("should not allow special characters", async () => { 41 | render(); 42 | 43 | await userEvent.type(screen.getByRole("textbox"), "abc$+!?def"); 44 | 45 | expect(screen.getByTestId("container")).toHaveTextContent(/^abcdef$/); 46 | }); 47 | 48 | it("should only allow digits", async () => { 49 | render(); 50 | 51 | await userEvent.type(screen.getByRole("textbox"), "0a1B2$3?4*5_"); 52 | 53 | expect(screen.getByTestId("container")).toHaveTextContent(/^012345$/); 54 | }); 55 | 56 | it("Should show only (*) in password mode", async () => { 57 | render(); 58 | 59 | await userEvent.type(screen.getByLabelText("verification input"), "012345"); 60 | 61 | expect(screen.getByTestId("container")).toHaveTextContent(/^\*\*\*\*\*\*$/); 62 | }); 63 | 64 | it("Should show only custom password character (e.g., '!') in password mode", async () => { 65 | render(); 66 | 67 | await userEvent.type(screen.getByLabelText("verification input"), "012345"); 68 | 69 | expect(screen.getByTestId("container")).toHaveTextContent(/^!!!!!!$/); 70 | }); 71 | 72 | it("should not allow placeholder character", async () => { 73 | render(); 74 | 75 | await userEvent.type(screen.getByRole("textbox"), "·0·1·2"); 76 | 77 | expect(screen.getByTestId("container")).toHaveTextContent(/^012···$/); 78 | }); 79 | 80 | it("should insert valid code on paste", async () => { 81 | render(); 82 | 83 | act(() => screen.getByRole("textbox").focus()); 84 | await userEvent.paste("012345"); 85 | 86 | expect(screen.getByTestId("container")).toHaveTextContent("012345"); 87 | }); 88 | 89 | it("should keep previous value if invalid code is pasted", async () => { 90 | render(); 91 | await userEvent.type(screen.getByRole("textbox"), "012345"); 92 | 93 | act(() => screen.getByRole("textbox").focus()); 94 | await userEvent.paste("abcdefg"); 95 | 96 | expect(screen.getByTestId("container")).toHaveTextContent("012345"); 97 | }); 98 | 99 | it("should allow the code to have blanks when pasting", async () => { 100 | render(); 101 | 102 | act(() => screen.getByRole("textbox").focus()); 103 | await userEvent.paste("012 345"); 104 | 105 | expect(screen.getByTestId("container")).toHaveTextContent("012345"); 106 | }); 107 | 108 | it("should auto focus the input if specified", async () => { 109 | render(); 110 | 111 | await waitFor(() => { 112 | expect(screen.getByRole("textbox")).toHaveFocus(); 113 | }); 114 | }); 115 | 116 | it("should select the rightmost active field", async () => { 117 | render(); 118 | await userEvent.type(screen.getByRole("textbox"), "01"); 119 | const rightmostActiveField = screen.getByTestId("character-2"); 120 | const inactiveField = screen.getByTestId("character-3"); 121 | 122 | await userEvent.click(inactiveField); 123 | 124 | expect(rightmostActiveField).toHaveClass("vi__character--selected"); 125 | }); 126 | 127 | it("should select the first field if empty", async () => { 128 | render(); 129 | const rightmostField = screen.getByTestId("character-0"); 130 | 131 | await userEvent.click(screen.getByTestId("container")); 132 | 133 | expect(rightmostField).toHaveClass("vi__character--selected"); 134 | }); 135 | 136 | it("should select the next field", async () => { 137 | render(); 138 | const nextField = screen.getByTestId("character-3"); 139 | 140 | await userEvent.type(screen.getByRole("textbox"), "012"); 141 | 142 | expect(nextField).toHaveClass("vi__character--selected"); 143 | }); 144 | 145 | it("should select the last field if full", async () => { 146 | render(); 147 | const lastField = screen.getByTestId("character-5"); 148 | 149 | await userEvent.type(screen.getByRole("textbox"), "012345"); 150 | 151 | expect(lastField).toHaveClass("vi__character--selected"); 152 | }); 153 | 154 | it("should only activate one empty field to the right", async () => { 155 | render(); 156 | 157 | await userEvent.type(screen.getByRole("textbox"), "012"); 158 | 159 | const emptyFields = screen.getAllByText("·"); 160 | expect(emptyFields[0]).not.toHaveClass("vi__character--inactive"); 161 | expect(emptyFields[1]).toHaveClass("vi__character--inactive"); 162 | expect(emptyFields[2]).toHaveClass("vi__character--inactive"); 163 | }); 164 | 165 | it("should delete characters to the left (backspace)", async () => { 166 | render(); 167 | await userEvent.type(screen.getByRole("textbox"), "012345"); 168 | 169 | await userEvent.type(screen.getByRole("textbox"), "{backspace}"); 170 | 171 | expect(screen.getByTestId("container")).toHaveTextContent(/^01234·$/); 172 | 173 | await userEvent.type(screen.getByRole("textbox"), "{backspace}"); 174 | 175 | expect(screen.getByTestId("container")).toHaveTextContent(/^0123··$/); 176 | }); 177 | 178 | it("should not do anything when delete is pressed", async () => { 179 | render(); 180 | await userEvent.type(screen.getByRole("textbox"), "0123"); 181 | 182 | expect(screen.getByTestId("container")).toHaveTextContent(/^0123··$/); 183 | 184 | await userEvent.type(screen.getByRole("textbox"), "{Delete}"); 185 | 186 | expect(screen.getByTestId("container")).toHaveTextContent(/^0123··$/); 187 | }); 188 | 189 | it("should allow to delete all the characters", async () => { 190 | render(); 191 | await userEvent.type(screen.getByRole("textbox"), "01"); 192 | 193 | await userEvent.type(screen.getByRole("textbox"), "{backspace}{backspace}"); 194 | 195 | expect(screen.getByTestId("container")).toHaveTextContent(/^······$/); 196 | }); 197 | 198 | it("should not move the cursor position with arrow keys", async () => { 199 | render(); 200 | const input = screen.getByRole("textbox"); 201 | 202 | await userEvent.type( 203 | input, 204 | "0{arrowleft}1{arrowright}2{arrowup}3{arrowdown}45" 205 | ); 206 | 207 | expect(screen.getByTestId("container")).toHaveTextContent("012345"); 208 | }); 209 | 210 | it("should not move the selection to an inactive field", async () => { 211 | render(); 212 | const input = screen.getByRole("textbox"); 213 | await userEvent.type(input, "012"); 214 | 215 | fireEvent.keyUp(input, { key: "ArrowRight", code: "ArrowRight" }); 216 | 217 | expect(screen.getByTestId("character-3")).toHaveClass( 218 | "vi__character--selected" 219 | ); 220 | }); 221 | 222 | it("should select the first empty field when focused by tab key", async () => { 223 | render( 224 | <> 225 | 226 | 227 | 228 | ); 229 | await userEvent.type(screen.getByRole("textbox"), "012"); 230 | 231 | const otherElement = screen.getByText("other element"); 232 | await userEvent.click(otherElement); 233 | await userEvent.tab(otherElement); 234 | 235 | expect(screen.getByTestId("character-3")).toHaveClass( 236 | "vi__character--selected" 237 | ); 238 | expect(screen.getByTestId("container")).toHaveTextContent(/^012···$/); 239 | // selectionStart is still 0 (but in the browser it works correctly) 240 | expect(screen.getByRole("textbox").selectionEnd).toBe(3); 241 | 242 | await userEvent.type(screen.getByRole("textbox"), "34"); 243 | await userEvent.click(otherElement); 244 | await userEvent.tab(otherElement); 245 | 246 | expect(screen.getByTestId("character-5")).toHaveClass( 247 | "vi__character--selected" 248 | ); 249 | expect(screen.getByTestId("container")).toHaveTextContent(/^01234·$/); 250 | act(() => screen.getByRole("textbox").focus()); 251 | // selectionStart is still 0 (but in the browser it works correctly) 252 | expect(screen.getByRole("textbox").selectionEnd).toBe(5); 253 | }); 254 | 255 | it("should trigger onChange callback", async () => { 256 | const spyHandleChange = jest.fn(); 257 | 258 | const Wrapper = () => { 259 | const [value, _setValue] = useState(""); 260 | 261 | const setValue = (v) => { 262 | spyHandleChange(v); 263 | _setValue(v); 264 | }; 265 | 266 | return ; 267 | }; 268 | render(); 269 | 270 | await userEvent.type(screen.getByRole("textbox"), "01"); 271 | 272 | expect(spyHandleChange).toHaveBeenCalledTimes(2); 273 | expect(spyHandleChange).toHaveBeenCalledWith("0"); 274 | expect(spyHandleChange).toHaveBeenCalledWith("01"); 275 | }); 276 | 277 | it("should trigger onChange callback even if value is not provided", async () => { 278 | const spyHandleChange = jest.fn(); 279 | 280 | render(); 281 | 282 | await userEvent.type(screen.getByRole("textbox"), "01"); 283 | 284 | expect(spyHandleChange).toHaveBeenCalledTimes(2); 285 | expect(spyHandleChange).toHaveBeenCalledWith("0"); 286 | expect(spyHandleChange).toHaveBeenCalledWith("01"); 287 | }); 288 | 289 | it("should trigger onComplete callback when value.length is equal to length", async () => { 290 | const spyOnComplete = jest.fn(); 291 | 292 | render(); 293 | 294 | await userEvent.type(screen.getByRole("textbox"), "012345"); 295 | 296 | expect(spyOnComplete).toHaveBeenCalledTimes(1); 297 | expect(spyOnComplete).toHaveBeenCalledWith("012345"); 298 | }); 299 | 300 | it("should trigger onFocus and onBlur callbacks", async () => { 301 | const spyHandleFocus = jest.fn(); 302 | const spyHandleBlur = jest.fn(); 303 | render( 304 | <> 305 | 306 |
other element
307 | 308 | ); 309 | 310 | await userEvent.click(screen.getByTestId("container")); 311 | await userEvent.click(screen.getByText("other element")); 312 | 313 | expect(spyHandleFocus).toHaveBeenCalledTimes(1); 314 | expect(spyHandleBlur).toHaveBeenCalledTimes(1); 315 | }); 316 | 317 | it("should provide ref as object", async () => { 318 | const inputRef = React.createRef(); 319 | render(); 320 | 321 | await userEvent.type(screen.getByRole("textbox"), "123456"); 322 | 323 | expect(inputRef.current).toHaveValue("123456"); 324 | }); 325 | 326 | it("should provide ref as function", async () => { 327 | const inputRef = React.createRef(); 328 | render( 329 | { 331 | inputRef.current = node; 332 | }} 333 | /> 334 | ); 335 | 336 | await userEvent.type(screen.getByRole("textbox"), "123456"); 337 | 338 | expect(inputRef.current).toHaveValue("123456"); 339 | }); 340 | 341 | it("should apply class names", async () => { 342 | render(); 343 | 344 | expect(screen.getByTestId("character-0")).toHaveClass( 345 | "vi__character", 346 | "vi__character--filled" 347 | ); 348 | expect(screen.getByTestId("character-1")).toHaveClass( 349 | "vi__character", 350 | "vi__character--filled" 351 | ); 352 | expect(screen.getByTestId("character-2")).toHaveClass( 353 | "vi__character", 354 | "vi__character--selected" 355 | ); 356 | expect(screen.getByTestId("character-3")).toHaveClass( 357 | "vi__character", 358 | "vi__character--inactive" 359 | ); 360 | expect(screen.getByTestId("character-4")).toHaveClass( 361 | "vi__character", 362 | "vi__character--inactive" 363 | ); 364 | expect(screen.getByTestId("character-5")).toHaveClass( 365 | "vi__character", 366 | "vi__character--inactive" 367 | ); 368 | }); 369 | 370 | it("should apply selected and filled to last character if value is complete", () => { 371 | render(); 372 | 373 | expect(screen.getByTestId("character-4")).toHaveClass( 374 | "vi__character--filled" 375 | ); 376 | expect(screen.getByTestId("character-5")).toHaveClass( 377 | "vi__character--filled", 378 | "vi__character--selected" 379 | ); 380 | }); 381 | 382 | it("should apply custom class names", () => { 383 | render( 384 | 395 | ); 396 | 397 | expect(screen.getByTestId("container")).toHaveClass("custom-container"); 398 | expect(screen.getByTestId("character-0")).toHaveClass( 399 | "custom-character", 400 | "custom-character-filled" 401 | ); 402 | expect(screen.getByTestId("character-1")).toHaveClass( 403 | "custom-character", 404 | "custom-character-filled" 405 | ); 406 | expect(screen.getByTestId("character-2")).toHaveClass( 407 | "custom-character", 408 | "custom-character-selected" 409 | ); 410 | expect(screen.getByTestId("character-3")).toHaveClass( 411 | "custom-character", 412 | "custom-character-inactive" 413 | ); 414 | expect(screen.getByTestId("character-4")).toHaveClass( 415 | "custom-character", 416 | "custom-character-inactive" 417 | ); 418 | expect(screen.getByTestId("character-5")).toHaveClass( 419 | "custom-character", 420 | "custom-character-inactive" 421 | ); 422 | }); 423 | 424 | it("should not have undefined class name", () => { 425 | render(); 426 | 427 | expect(screen.getByTestId("container")).not.toHaveClass("undefined"); 428 | expect(screen.getByTestId("character-0")).not.toHaveClass("undefined"); 429 | expect(screen.getByTestId("character-1")).not.toHaveClass("undefined"); 430 | expect(screen.getByTestId("character-2")).not.toHaveClass("undefined"); 431 | expect(screen.getByTestId("character-3")).not.toHaveClass("undefined"); 432 | expect(screen.getByTestId("character-4")).not.toHaveClass("undefined"); 433 | expect(screen.getByTestId("character-5")).not.toHaveClass("undefined"); 434 | }); 435 | 436 | it("should forward inputProps to input element", () => { 437 | render(); 438 | 439 | expect(screen.getByRole("textbox")).toHaveAttribute("type", "tel"); 440 | }); 441 | 442 | it("should combine default and custom class names on input", () => { 443 | render(); 444 | 445 | expect(screen.getByRole("textbox")).toHaveClass("vi custom"); 446 | }); 447 | 448 | it("should combine default and custom class names on container", () => { 449 | render( 450 | 454 | ); 455 | 456 | expect(screen.getByTestId("container")).toHaveClass( 457 | "vi__container custom-1 custom-2" 458 | ); 459 | }); 460 | 461 | it("should forward containerProps to container element", () => { 462 | render(); 463 | 464 | expect(screen.getByTestId("container")).toHaveAttribute("prop", "value"); 465 | }); 466 | 467 | it("should disable spell check", () => { 468 | render(); 469 | 470 | expect(screen.getByRole("textbox")).toHaveAttribute("spellcheck", "false"); 471 | }); 472 | 473 | it("should remove selection after disabling input", () => { 474 | const { rerender } = render( 475 | 481 | ); 482 | 483 | expect(screen.getByTestId("character-0")).toHaveClass( 484 | "vi__character", 485 | "vi__character--filled" 486 | ); 487 | expect(screen.getByTestId("character-1")).toHaveClass( 488 | "vi__character", 489 | "vi__character--selected" 490 | ); 491 | expect(screen.getByTestId("character-2")).toHaveClass( 492 | "vi__character", 493 | "vi__character--inactive" 494 | ); 495 | 496 | rerender( 497 | 503 | ); 504 | 505 | expect(screen.getByTestId("character-0")).toHaveClass( 506 | "vi__character", 507 | "vi__character--filled" 508 | ); 509 | expect(screen.getByTestId("character-1")).toHaveClass("vi__character"); 510 | expect(screen.getByTestId("character-2")).toHaveClass( 511 | "vi__character", 512 | "vi__character--inactive" 513 | ); 514 | }); 515 | }); 516 | -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/migration/v3-6e4cbdad9fc8eb9f.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[104],{8486:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/migration/v3",function(){return n(8205)}])},250:function(e,s,n){"use strict";var t=n(5893);s.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,t.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,t.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,t.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,t.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,t.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,t.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,t.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,t.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,t.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,t.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,t.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,t.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,t.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,t.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,t.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},8205:function(e,s,n){"use strict";n.r(s),n.d(s,{default:function(){return a.Z}});var t=n(5893),i=n(4526),r=n(7928),o=n(250);n(5513);var l=n(1151);n(5675);var a=n(2243);function c(e){let s=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre",span:"span"},(0,l.ah)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h1,{children:"Migrating to Version 3"}),"\n",(0,t.jsxs)(s.p,{children:["This guide is aimed at developers wanting to update from ",(0,t.jsx)(s.code,{children:"v2.x.x"})," to ",(0,t.jsx)(s.code,{children:"v3.x.x"}),"."]}),"\n",(0,t.jsx)(s.p,{children:"Check the following steps one by one and execute the ones that apply to your\nsituation."}),"\n",(0,t.jsxs)(s.h2,{id:"new-prop-containerprops",children:["New prop: ",(0,t.jsx)(s.code,{children:"containerProps"})]}),"\n",(0,t.jsxs)(s.p,{children:["Custom props are no longer forwarded to the container element. Use the new\nprop ",(0,t.jsx)(s.code,{children:"containerProps"})," instead and specify the custom props in object literal\nform."]}),"\n",(0,t.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v2"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"input-container"'})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v3"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"containerProps"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" id"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"input-container"'})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,t.jsxs)(s.h2,{id:"remove-prop-removedefaultstyles",children:["Remove prop: ",(0,t.jsx)(s.code,{children:"removeDefaultStyles"})]}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"removeDefaultStyles"})," prop has been removed. Styles are now overridable by\ndefault. Thus this prop can be removed safely."]}),"\n",(0,t.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v2"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"removeDefaultStyles"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"classNames"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" character"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character"'})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:" "}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v3"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"classNames"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" character"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,t.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character"'})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})})]})}e=n.hmd(e),(0,i.j)({pageNextRoute:"/migration/v3",pageOpts:{filePath:"pages/migration/v3.mdx",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Migrating to Version 3",id:"migrating-to-version-3"},{depth:2,value:"New prop: containerProps",id:"new-prop-containerprops"},{depth:2,value:"Remove prop: removeDefaultStyles",id:"remove-prop-removedefaultstyles"}],timestamp:1660612396e3,flexsearch:{codeblocks:!0},title:"Migrating to Version 3"},nextraLayout:r.ZP,themeConfig:o.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.ah)(),e.components);return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})}},function(e){e.O(0,[799,774,888,179],function(){return e(e.s=8486)}),_N_E=e.O()}]); -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/styling-0d6fd8cb44171d2d.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3],{9724:function(e,n,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styling",function(){return r(1375)}])},1375:function(e,n,r){"use strict";r.r(n),r.d(n,{default:function(){return x.Z}});var s=r(5893),t=r(4526),o=r(7928),l=r(250);r(5513);var i=r(1151);r(5675);var a=r(254),c=r.n(a),h=r(202),d=r(7870),x=r(2243);function p(e){let n=Object.assign({h1:"h1",h2:"h2",pre:"pre",code:"code",span:"span"},(0,i.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{children:"Styling"}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h3",name:"Custom Styling",removeHeading:!0}),"\n",(0,s.jsx)(d.Z,{markdown:h.Z,type:"h4",name:"Component Structure",removeHeading:!0}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{length:5,classNames:{character:"character"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"none"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"font-size"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"border-radius"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"8"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* light theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#272729"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#f6f5fa"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #e4e2f5"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* dark theme */"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#fff"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#222"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"box-shadow"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0 2"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" 0 #444"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,s.jsx)(n.h2,{id:"with-cursor-caret",children:"With Cursor (Caret)"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(c(),{classNames:{character:"cursor_character",characterSelected:"cursor_character--selected",characterFilled:"cursor_character--filled"}}),"\n",(0,s.jsx)(n.pre,{"data-language":"css","data-theme":"default",children:(0,s.jsxs)(n.code,{"data-language":"css","data-theme":"default",children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"relative"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/* optionally hide placeholder (in case it overlaps the cursor) */"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transparent"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--selected:not"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".character--filled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"::after"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"content"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"width"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"height"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"25"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"px"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"background-color"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"#333"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"display"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"block"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"absolute"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"top"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"left"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"transform"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"translate"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"(-50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" -50"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"%"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:")"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"animation"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"blink 1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"s"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" infinite step-end"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:" "}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@keyframes"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" blink {"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 0% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" 50% {"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"opacity"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}e=r.hmd(e),(0,t.j)({pageNextRoute:"/styling",pageOpts:{filePath:"pages/styling.mdx",route:"/styling",frontMatter:{title:"Styling"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"Meta",data:{v4:"Migrating to Version 4",v3:"Migrating to Version 3",v2:"Migrating to Version 2"}},{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}},{kind:"MdxPage",name:"v4",route:"/migration/v4",frontMatter:{title:"Migrating to Version 4"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Styling",id:"styling"},{depth:2,value:"Example",id:"example"},{depth:2,value:"With Cursor (Caret)",id:"with-cursor-caret"}],timestamp:1674338328e3,flexsearch:{codeblocks:!0},title:"Styling"},nextraLayout:o.ZP,themeConfig:l.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,i.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})},254:function(e,n,r){/*! For license information please see index.js.LICENSE.txt */(()=>{var e={365:(e,n,r)=>{"use strict";r.d(n,{A:()=>i});var s=r(601),t=r.n(s),o=r(314),l=r.n(o)()(t());l.push([e.id,".vi {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n position: absolute;\n color: transparent;\n background: transparent;\n caret-color: transparent;\n outline: none;\n border: 0 none transparent;\n}\n\n.vi:-webkit-autofill {\n opacity: 0;\n}\n\n.vi::-ms-reveal,\n.vi::-ms-clear {\n display: none;\n}\n\n.vi::selection {\n background: transparent;\n}\n\n/* :where() gives the styles specificity 0, which makes them overridable */\n:where(.vi__container) {\n position: relative;\n display: flex;\n gap: 8px;\n height: 50px;\n width: 300px;\n}\n\n:where(.vi__character) {\n height: 100%;\n flex-grow: 1;\n flex-basis: 0;\n text-align: center;\n font-size: 36px;\n line-height: 50px;\n color: black;\n background-color: white;\n border: 1px solid black;\n cursor: default;\n user-select: none;\n box-sizing: border-box;\n}\n\n:where(.vi__character--inactive) {\n color: dimgray;\n background-color: lightgray;\n}\n\n:where(.vi__character--selected) {\n outline: 2px solid cornflowerblue;\n color: cornflowerblue;\n}\n",""]);let i=l},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var r="",s=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&&(r+="@media ".concat(n[2]," {")),s&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=e(n),s&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r}).join("")},n.i=function(e,r,s,t,o){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(s)for(var i=0;i0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=o),r&&(h[2]&&(h[1]="@media ".concat(h[2]," {").concat(h[1],"}")),h[2]=r),t&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=t):h[4]="".concat(t)),n.push(h))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},942:(e,n)=>{var r;!function(){"use strict";var s={}.hasOwnProperty;function t(){for(var e="",n=0;n{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";t.r(o),t.d(o,{default:()=>v});let e=r(7294);var n=t.n(e),s=t(942),l=t.n(s),i=t(365),a=["className","type"],c=["className"];function h(){return(h=Object.assign?Object.assign.bind():function(e){for(var n=1;ne.length)&&(n=e.length);for(var r=0,s=Array(n);re},K=M.className,q=M.type,J=d(M,a),Q=O.className,Y=d(O,c);return n().createElement(n().Fragment,null,n().createElement("div",h({"data-testid":"container",className:l()("vi__container",C.container,Q),onClick:function(){return L.current.focus()}},Y),n().createElement("input",h({"aria-label":"verification input",spellCheck:!1,value:W(),onChange:function(e){var n=e.target.value.replace(/\s/g,"");RegExp("^[".concat(j,"]{0,").concat(y,"}$")).test(n)&&(null==E||E(n),R(n),n.length===y&&(null==Z||Z(n)))},ref:function(e){L.current=e,"function"==typeof s?s(e):s&&(s.current=e)},className:l()("vi",K),onKeyDown:function(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&e.preventDefault()},onFocus:function(){H(!0),null==I||I()},onBlur:function(){H(!1),null==F||F()},onSelect:function(e){var n=e.target.value;e.target.setSelectionRange(n.length,n.length)},type:w?"password":q},J)),((function(e){if(Array.isArray(e))return k(e)})(B=Array(y))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(B)||p(B)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).map(function(e,r){return n().createElement("div",{className:l()("vi__character",C.character,{"vi__character--selected":X(r),"vi__character--inactive":$(r),"vi__character--filled":G(r)},X(r)&&C.characterSelected,$(r)&&C.characterInactive,G(r)&&C.characterFilled),onClick:U,id:"field-".concat(r),"data-testid":"character-".concat(r),key:r},w&&W()[r]?_:W()[r]||f)})),n().createElement("style",{dangerouslySetInnerHTML:{__html:i.A}}))});y.displayName="VerificationInput";let v=y})();var l=n;for(var i in o)l[i]=o[i];o.__esModule&&Object.defineProperty(l,"__esModule",{value:!0})})()}},function(e){e.O(0,[799,781,774,888,179],function(){return e(e.s=9724)}),_N_E=e.O()}]); -------------------------------------------------------------------------------- /docs/_next/static/chunks/781-bf07540ab58ff368.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[781],{7870:function(e,t,s){s.d(t,{Z:function(){return n}});var i=s(5893);function n(e){var t;let{markdown:s,type:n,name:r,removeHeading:l=!1}=e,c=s(),o=c.props.children.findIndex(e=>{var t;return(null===(t=e.props)||void 0===t?void 0:t.children)===r}),a=o+1+c.props.children.slice(o+1).findIndex(e=>{var s;return n===(null!==(t=null==e?void 0:null===(s=e.type)||void 0===s?void 0:s.name)&&void 0!==t?t:null==e?void 0:e.type)});return a<=o&&(a=c.props.children.length-1),l&&(o+=1),(0,i.jsx)(i.Fragment,{children:c.props.children.slice(o,a)})}},250:function(e,t,s){var i=s(5893);t.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,i.jsx)(i.Fragment,{children:(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,i.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,i.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,i.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,i.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,i.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,i.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,i.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,i.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,i.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,i.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,i.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,i.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,i.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,i.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,i.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},202:function(e,t,s){var i=s(5893),n=s(1151);function r(e){let t=Object.assign({p:"p",img:"img",a:"a",code:"code",h2:"h2",strong:"strong",pre:"pre",span:"span",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h3:"h3"},(0,n.ah)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{src:"https://user-images.githubusercontent.com/17298270/184383285-616eaa7c-d911-4203-ad0a-9ddfa32e4e4b.png",alt:"logo"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/react-verification-input",children:(0,i.jsx)(t.img,{src:"https://img.shields.io/npm/v/react-verification-input?color=orange",alt:"npm"})}),"\n",(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/react-verification-input",children:(0,i.jsx)(t.img,{src:"https://img.shields.io/npm/dm/react-verification-input.svg?style=flat",alt:"npm downloads"})}),"\n",(0,i.jsx)(t.a,{href:"https://github.com/andreaswilli/react-verification-input/actions/workflows/lint-and-test.yml",children:(0,i.jsx)(t.img,{src:"https://github.com/andreaswilli/react-verification-input/actions/workflows/lint-and-test.yml/badge.svg?branch=master",alt:"Lint and Test"})}),"\n",(0,i.jsx)(t.img,{src:"https://img.shields.io/bundlephobia/min/react-verification-input?color=cornflowerblue",alt:"npm bundle size"})]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"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."]}),"\n",(0,i.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,i.jsxs)(t.p,{children:["\uD83D\uDD34 ",(0,i.jsx)(t.a,{href:"https://andreaswilli.github.io/react-verification-input",children:(0,i.jsx)(t.strong,{children:"Try it out yourself!"})})]}),"\n",(0,i.jsx)("img",{width:"400px",alt:"verification-input",src:"https://user-images.githubusercontent.com/17298270/120872091-e821d200-c59d-11eb-87f5-729692c6b40a.gif"}),"\n",(0,i.jsx)(t.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(t.p,{children:["⚡ ",(0,i.jsx)(t.strong,{children:"Get Started Easily"}),": The component works out of the box without the need to pass it a single prop."]}),"\n",(0,i.jsxs)(t.p,{children:["\uD83D\uDEE0 ",(0,i.jsx)(t.strong,{children:"Highly Configurable"}),": Change the behaviour of the component to fit your needs by passing ",(0,i.jsx)(t.a,{href:"#api-documentation",children:"props"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["\uD83D\uDC85\uD83C\uDFFC ",(0,i.jsx)(t.strong,{children:"Custom Styling"}),": ",(0,i.jsx)(t.a,{href:"#custom-styling",children:"Customize"})," the component's styling to match the look of your application."]}),"\n",(0,i.jsxs)(t.p,{children:["\uD83D\uDC68\uD83C\uDFFC‍\uD83D\uDCBB ",(0,i.jsx)(t.strong,{children:"TypeScript Support"}),": The package contains TypeScript declarations so you can enjoy IntelliSense in your editor."]}),"\n",(0,i.jsxs)(t.p,{children:["✅ ",(0,i.jsx)(t.strong,{children:"Compatibility"}),": Compatible with React 16 (>=16.8.0) up to React 19. Support of new versions of React as they are released will be ensured."]}),"\n",(0,i.jsx)(t.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,i.jsxs)(t.p,{children:["First, install the package using ",(0,i.jsx)(t.a,{href:"https://docs.npmjs.com/cli/v7/commands/npm-install",children:"npm"})," or ",(0,i.jsx)(t.a,{href:"https://classic.yarnpkg.com/en/docs/cli/add",children:"yarn"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Now, import the React component like this:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsx)(t.code,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" VerificationInput "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-verification-input"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),"\n",(0,i.jsx)(t.p,{children:"And in your JSX write:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsx)(t.code,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]})})}),"\n",(0,i.jsx)(t.p,{children:"That's it! You now have a basic verification input with default configuration rendered on your page. \uD83C\uDF89\uD83D\uDE03"}),"\n",(0,i.jsxs)(t.p,{children:["The component accepts a variety of props, which allow to configure the component according to your needs. For a complete API overview see ",(0,i.jsx)(t.a,{href:"#api-documentation",children:"here"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"api-documentation",children:"API Documentation"}),"\n",(0,i.jsxs)(t.p,{children:["All of these props are optional and some also come with a default value. However, it's recommended to use at least the ",(0,i.jsx)(t.code,{children:"length"}),", ",(0,i.jsx)(t.code,{children:"validChars"})," and ",(0,i.jsx)(t.code,{children:"onChange"}),"/",(0,i.jsx)(t.code,{children:"onComplete"})," props."]}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Option"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Default"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"value"}),(0,i.jsx)(t.td,{children:"String"}),(0,i.jsx)(t.td,{children:"-"}),(0,i.jsx)(t.td,{children:"The value of the verification input. Behaves like the value prop of a regular input element. This is necessary if the value needs to be changed from the outside (e.g. clearing the value). If you pass this prop, you are responsible to manage the value state. Otherwise the state will be kept inside the component."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"length"}),(0,i.jsx)(t.td,{children:"Number"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"6"})}),(0,i.jsx)(t.td,{children:"Number of characters the input should allow."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"validChars"}),(0,i.jsx)(t.td,{children:"String"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"'A-Za-z0-9'"})}),(0,i.jsxs)(t.td,{children:["Set of characters the input should allow. The string is inserted into a regexp character set ( ",(0,i.jsx)(t.code,{children:"/[]/"})," ) for input validation."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"placeholder"}),(0,i.jsx)(t.td,{children:"String"}),(0,i.jsxs)(t.td,{children:[(0,i.jsx)(t.code,{children:"'\xb7'"})," (U+00B7)"]}),(0,i.jsxs)(t.td,{children:["The character to display in empty fields. In order to use the blank character as a placeholder, specify this option as ",(0,i.jsx)(t.code,{children:"' '"})," or ",(0,i.jsx)(t.code,{children:"''"}),"."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"autoFocus"}),(0,i.jsx)(t.td,{children:"Boolean"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"false"})}),(0,i.jsx)(t.td,{children:"Focus the input automatically as soon as it is rendered."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"passwordMode"}),(0,i.jsx)(t.td,{children:"Boolean"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"false"})}),(0,i.jsxs)(t.td,{children:["Hide the input value by displaying ",(0,i.jsx)(t.code,{children:"*"})," instead."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"passwordChar"}),(0,i.jsx)(t.td,{children:"String"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"'*'"})}),(0,i.jsxs)(t.td,{children:["Custom character to be displayed when ",(0,i.jsx)(t.code,{children:"passwordMode"})," is ",(0,i.jsx)(t.code,{children:"true"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"inputProps"}),(0,i.jsx)(t.td,{children:"Object"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"{}"})}),(0,i.jsxs)(t.td,{children:["The properties of this object get forwarded as props to the input element. In particular, you can use this prop to assign an ",(0,i.jsx)(t.code,{children:"id"})," attribute to the input field to connect it to a ",(0,i.jsx)(t.code,{children:"label"})," element. Use ",(0,i.jsx)(t.code,{children:"aria-label"})," for internationalization of the input field."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"containerProps"}),(0,i.jsx)(t.td,{children:"Object"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"{}"})}),(0,i.jsx)(t.td,{children:"The properties of this object get forwarded as props to the container element."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"classNames"}),(0,i.jsx)(t.td,{children:"Object"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"{}"})}),(0,i.jsxs)(t.td,{children:["Object with CSS class names to add to the specified elements. Supported elements (= object-keys) are ",(0,i.jsx)(t.code,{children:"container"}),", ",(0,i.jsx)(t.code,{children:"character"}),", ",(0,i.jsx)(t.code,{children:"characterInactive"}),", ",(0,i.jsx)(t.code,{children:"characterSelected"}),", ",(0,i.jsx)(t.code,{children:"characterFilled"})]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"onChange"}),(0,i.jsx)(t.td,{children:"Function"}),(0,i.jsx)(t.td,{children:"-"}),(0,i.jsx)(t.td,{children:"Callback function that gets called with the string value whenever it changes."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"onComplete"}),(0,i.jsx)(t.td,{children:"Function"}),(0,i.jsx)(t.td,{children:"-"}),(0,i.jsx)(t.td,{children:"Callback function that gets called with the string value when the input is fully filled."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"onFocus"}),(0,i.jsx)(t.td,{children:"Function"}),(0,i.jsx)(t.td,{children:"-"}),(0,i.jsx)(t.td,{children:"Callback function that gets called when the component obtains focus."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"onBlur"}),(0,i.jsx)(t.td,{children:"Function"}),(0,i.jsx)(t.td,{children:"-"}),(0,i.jsx)(t.td,{children:"Callback function that gets called when the component loses focus."})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"custom-styling",children:"Custom Styling"}),"\n",(0,i.jsx)(t.p,{children:"Style the input by passing it your custom class names like so:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(t.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"classNames"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" container"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"container"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" character"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" characterInactive"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character--inactive"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" characterSelected"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character--selected"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" characterFilled"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character--filled"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,i.jsx)(t.h3,{id:"example",children:"Example"}),"\n",(0,i.jsxs)(t.p,{children:["\uD83D\uDD34 ",(0,i.jsx)(t.a,{href:"https://andreaswilli.github.io/react-verification-input/styling",children:(0,i.jsx)(t.strong,{children:"View live example!"})})]}),"\n",(0,i.jsx)(t.h3,{id:"component-structure",children:"Component Structure"}),"\n",(0,i.jsx)(t.p,{children:"The following illustration shows the component structure."}),"\n",(0,i.jsx)("img",{width:"500px",alt:"elements",src:"https://github.com/andreaswilli/react-verification-input/assets/17298270/e0af9092-56e8-4791-a224-e964f9ddd775"}),"\n",(0,i.jsx)(t.h2,{id:"contributing",children:"Contributing"}),"\n",(0,i.jsxs)(t.p,{children:["Contributions welcome ❤️. If you want to contribute, feel free to have a look at the ",(0,i.jsx)(t.a,{href:"/CONTRIBUTING.md",children:"contribution guide"}),"."]})]})}s(5675),t.Z=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,n.ah)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(r,{...e})}):r(e)}}}]); -------------------------------------------------------------------------------- /docs/_next/static/chunks/pages/migration/v2-d4a45e77baa8d2d6.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[273],{1840:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/migration/v2",function(){return n(9953)}])},250:function(e,s,n){"use strict";var r=n(5893);s.Z={project:{link:"https://github.com/andreaswilli/react-verification-input"},docsRepositoryBase:"https://github.com/andreaswilli/react-verification-input/tree/master/docs-src",useNextSeoProps:()=>({titleTemplate:"%s | react-verification-input"}),darkMode:!0,logo:(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"150px",viewBox:"0 0 670 214",fill:"none",children:[(0,r.jsx)("path",{d:"M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"503.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"509",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z",fill:"black"}),(0,r.jsx)("rect",{x:"397.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"403",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z",fill:"black"}),(0,r.jsx)("rect",{x:"291.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"297",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z",fill:"black"}),(0,r.jsx)("rect",{x:"185.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"191",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z",fill:"black"}),(0,r.jsx)("rect",{x:"79.5",y:"121.5",width:"87",height:"91",rx:"6.5",stroke:"#CA33FF",strokeWidth:"3"}),(0,r.jsx)("rect",{x:"85",y:"127",width:"76",height:"80",rx:"2",fill:"white"}),(0,r.jsx)("path",{d:"M125.103 149.091V184H120.876V149.091H125.103Z",fill:"black"}),(0,r.jsx)("path",{d:"M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z",fill:"#CA33FF"}),(0,r.jsx)("path",{d:"M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z",fill:"#CA33FF",stroke:"#CA33FF",strokeWidth:"3"})]})}),head:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("meta",{property:"og:title",content:"react-verification-input"}),(0,r.jsx)("meta",{property:"og:description",content:"Customizable, masked input for React."})]})}},9953:function(e,s,n){"use strict";n.r(s),n.d(s,{default:function(){return a.Z}});var r=n(5893),i=n(4526),t=n(7928),l=n(250);n(5513);var o=n(1151);n(5675);var a=n(2243);function c(e){let s=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre",span:"span",a:"a"},(0,o.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{children:"Migrating to Version 2"}),"\n",(0,r.jsxs)(s.p,{children:["This guide is aimed at developers wanting to update from ",(0,r.jsx)(s.code,{children:"v0.1.x"})," to ",(0,r.jsx)(s.code,{children:"v2.x.x"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Check the following steps one by one and execute the ones that apply to your\nsituation."}),"\n",(0,r.jsxs)(s.h2,{id:"rename-prop-input",children:["Rename prop: ",(0,r.jsx)(s.code,{children:"input"})]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"input"})," prop has been renamed to ",(0,r.jsx)(s.code,{children:"inputProps"})," in order to be more explicit\nabout the props being forwarded to the input element. Also, the ",(0,r.jsx)(s.code,{children:"onChange"}),"\ncallback is now available on the top level. This matches the interface of a\nregular input element more closely (there is also a new top-level prop\n",(0,r.jsx)(s.code,{children:"value"}),")."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v0.1.x"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"tel"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{code}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" onChange"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{handleCodeChange}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v2"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"inputProps"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"tel"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{code}"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onChange"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{handleCodeChange}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,r.jsxs)(s.h2,{id:"remove-props-container-inputfield-characters-character",children:["Remove props: ",(0,r.jsx)(s.code,{children:"container"}),", ",(0,r.jsx)(s.code,{children:"inputField"}),", ",(0,r.jsx)(s.code,{children:"characters"}),", ",(0,r.jsx)(s.code,{children:"character"})]}),"\n",(0,r.jsxs)(s.p,{children:["These props have been removed. Your custom CSS classes can be passed to the\nnew ",(0,r.jsx)(s.code,{children:"classNames"})," prop. In order to simplify the component structure, the\n",(0,r.jsx)(s.code,{children:"characters"})," element has been removed, use ",(0,r.jsx)(s.code,{children:"container"})," instead. For more\ndetails see ",(0,r.jsx)(s.a,{href:"/styling",children:"Styling"}),". Additional props can no longer be forwarded\nto these elements."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v0.1.x"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" className"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'container'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"characters"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" className"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'characters'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"character"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" className"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'character'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v2"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"classNames"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{{"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"container"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" character"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"character"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})}),"\n",(0,r.jsxs)(s.h2,{id:"remove-prop-getinputref",children:["Remove prop: ",(0,r.jsx)(s.code,{children:"getInputRef"})]}),"\n",(0,r.jsxs)(s.p,{children:["This callback has been removed. The new way to receive the input ref is to use\nthe ",(0,r.jsxs)(s.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html",children:["standard ",(0,r.jsx)(s.code,{children:"ref"})," prop"]}),". The\nresult will be a ref to the actual (invisible) input element."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"jsx","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"jsx","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v0.1.x"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getInputRef"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{ref "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {myRef "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ref}}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// v2"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"VerificationInput"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ref"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{myRef}"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"/>"})})]})})]})}e=n.hmd(e),(0,i.j)({pageNextRoute:"/migration/v2",pageOpts:{filePath:"pages/migration/v2.mdx",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"},pageMap:[{kind:"MdxPage",name:"API",route:"/API",frontMatter:{title:"API"}},{kind:"Meta",data:{index:"Demo",API:"API",styling:"Styling",migration:"Migration Guide"}},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Demo"}},{kind:"Folder",name:"migration",route:"/migration",children:[{kind:"MdxPage",name:"v2",route:"/migration/v2",frontMatter:{title:"Migrating to Version 2"}},{kind:"MdxPage",name:"v3",route:"/migration/v3",frontMatter:{title:"Migrating to Version 3"}}]},{kind:"MdxPage",name:"styling",route:"/styling",frontMatter:{title:"Styling"}}],headings:[{depth:1,value:"Migrating to Version 2",id:"migrating-to-version-2"},{depth:2,value:"Rename prop: input",id:"rename-prop-input"},{depth:2,value:"Remove props: container, inputField, characters, character",id:"remove-props-container-inputfield-characters-character"},{depth:2,value:"Remove prop: getInputRef",id:"remove-prop-getinputref"}],timestamp:1660612396e3,flexsearch:{codeblocks:!0},title:"Migrating to Version 2"},nextraLayout:t.ZP,themeConfig:l.Z,Content:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,o.ah)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)},hot:e.hot,pageOptsChecksum:void 0,dynamicMetaModules:[]})}},function(e){e.O(0,[799,774,888,179],function(){return e(e.s=1840)}),_N_E=e.O()}]); --------------------------------------------------------------------------------