{"id":20508210,"url":"https://github.com/ugogo/react-input-verification-code","last_synced_at":"2025-09-05T07:43:16.905Z","repository":{"id":41985774,"uuid":"273295978","full_name":"ugogo/react-input-verification-code","owner":"ugogo","description":"A verification code input, autocompletion friendly","archived":false,"fork":false,"pushed_at":"2024-10-07T18:23:32.000Z","size":3435,"stargazers_count":42,"open_issues_count":9,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T18:13:21.884Z","etag":null,"topics":["authentication","code","input","pin-code","react","verification-code","verify"],"latest_commit_sha":null,"homepage":"https://ugogo.github.io/react-input-verification-code","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ugogo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-18T17:08:09.000Z","updated_at":"2025-02-07T01:08:50.000Z","dependencies_parsed_at":"2024-06-18T16:48:23.174Z","dependency_job_id":"d77e57fa-307c-4973-9787-c2ac549f088a","html_url":"https://github.com/ugogo/react-input-verification-code","commit_stats":{"total_commits":164,"total_committers":10,"mean_commits":16.4,"dds":0.6280487804878049,"last_synced_commit":"4822022c268571529086fd46b61223004d5a023e"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ugogo%2Freact-input-verification-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ugogo%2Freact-input-verification-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ugogo%2Freact-input-verification-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ugogo%2Freact-input-verification-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ugogo","download_url":"https://codeload.github.com/ugogo/react-input-verification-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","code","input","pin-code","react","verification-code","verify"],"created_at":"2024-11-15T20:17:31.995Z","updated_at":"2025-04-04T19:12:50.311Z","avatar_url":"https://github.com/ugogo.png","language":"TypeScript","readme":"### **⚠️ This README is for the `v2` which is currently in beta release\u003cbr /\u003eThe `v1` can been found [here](https://github.com/ugogo/react-input-verification-code/tree/1.0.2)**\n\n---\n# react-input-verification-code\n\nA verification code input, mobile autocompletion friendly\n\n[![NPM](https://img.shields.io/npm/v/react-input-verification-code.svg)](https://www.npmjs.com/package/react-input-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Features\n\n- Support native autocompletion when receiving a code via SMS\n- Support pasted string\n\n## Examples\n\n- [Basic](https://codesandbox.io/s/basic-6ejdp)\n- [Controllable](https://codesandbox.io/s/controllable-32dfy)\n- [Custom Styles](https://codesandbox.io/s/custom-styles-bw8s4)\n\n## peerDependencies\n\n```\n{\n  \"react\": \"\u003e=16.0.0\",\n  \"react-dom\": \"\u003e=16.0.0\"\n}\n```\n\n## Install\n\n```bash\nyarn add react-input-verification-code\n```\n\n## Usage\n\n```tsx\nimport React from 'react';\nimport ReactInputVerificationCode, {\n  ReactInputVerificationCodeProps,\n} from 'react-input-verification-code';\n\nconst customProps: ReactInputVerificationCodeProps = {\n  autoFocus: true,\n};\n\nexport default function App() {\n  return \u003cReactInputVerificationCode {...customProps} /\u003e;\n}\n```\n\n## API\n\n### Props\n\n| Key         | Type                                           | Default      | Required | Description                                        |\n| ----------- | ---------------------------------------------- | ------------ | -------- | -------------------------------------------------- |\n| autoFocus   | `boolean`                                      | false        | false    | Should focus on first render                       |\n| inputProps  | `React.InputHTMLAttributes\u003cHTMLInputElement\u003e;` | `undefined`  | false    | Allow passing custom props into the inputs         |\n| length      | `number`                                       | `4`          | false    | How many inputs will be rendered                   |\n| onChange    | `function`                                     | `() =\u003e null` | false    | Function called when the value changes             |\n| onCompleted | `function`                                     | `() =\u003e null` | false    | Function called when the value is completed        |\n| placeholder | `string`                                       | `·`          | false    | Inputs placeholder                                 |\n| value       | `string`                                       | `\"\"`         | false    | Default value                                      |\n| type        | `'alphanumeric, number'`                       | `number`     | false    | Should accepts alphanumeric values or only numbers |\n\n### Custom Styles\n\nSimply override the styles using the following classnames\n\n```css\n.ReactInputVerificationCode-container {\n  /*  */\n}\n\n.ReactInputVerificationCode-item {\n  /*  */\n}\n```\n\n## License\n\nMIT © [ugogo](https://github.com/ugogo)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fugogo%2Freact-input-verification-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fugogo%2Freact-input-verification-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fugogo%2Freact-input-verification-code/lists"}