{"id":13678468,"url":"https://github.com/drac94/react-auth-code-input","last_synced_at":"2025-04-29T13:31:07.962Z","repository":{"id":38298335,"uuid":"267155480","full_name":"drac94/react-auth-code-input","owner":"drac94","description":"One-time password (OTP) React component, zero dependencies, fully tested.","archived":true,"fork":false,"pushed_at":"2024-02-19T23:39:01.000Z","size":683,"stargazers_count":123,"open_issues_count":11,"forks_count":35,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-04T04:21:07.010Z","etag":null,"topics":["authentication","input","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.luisguerrero.me/react-auth-code-input/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drac94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-05-26T21:26:25.000Z","updated_at":"2024-11-03T03:45:50.000Z","dependencies_parsed_at":"2024-01-14T14:31:49.291Z","dependency_job_id":"77df3500-dc83-420c-a5d1-c7afc446e501","html_url":"https://github.com/drac94/react-auth-code-input","commit_stats":{"total_commits":52,"total_committers":4,"mean_commits":13.0,"dds":0.5,"last_synced_commit":"d19a05596642bb2c49e4239b09fe87ffd3334af0"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drac94%2Freact-auth-code-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drac94%2Freact-auth-code-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drac94%2Freact-auth-code-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drac94%2Freact-auth-code-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drac94","download_url":"https://codeload.github.com/drac94/react-auth-code-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173977,"owners_count":17268205,"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","input","react","typescript"],"created_at":"2024-08-02T13:00:53.869Z","updated_at":"2024-11-11T20:31:43.757Z","avatar_url":"https://github.com/drac94.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\n\u003e [!IMPORTANT]  \n\u003e After much consideration, I've come to the difficult decision that I will no longer be able to maintain this project due to my current time constraints. I sincerely apologize for any inconvenience this may cause and appreciate the understanding and support from the community. It's been a rewarding journey, and I'm grateful for the contributions and engagement of all involved. Thank you for your understanding.\n\n![image](https://user-images.githubusercontent.com/1719915/159784302-4bb83708-e993-4800-9bcf-091ecb709ef7.png)\n\n# React Auth Code Input\n\n\u003e One-time password (OTP) React component, zero dependencies, fully tested.\n\n[![NPM](https://img.shields.io/npm/v/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE.md)\n[![npm](https://img.shields.io/npm/dt/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input)\n[![npm](https://img.shields.io/npm/dw/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input)\n![GitHub actions state](https://img.shields.io/github/workflow/status/drac94/react-auth-code-input/CI)\n\n## Demo\n\n[Demo](https://www.luisguerrero.me/react-auth-code-input/)\n\n## Install\n\n```bash\nnpm install --save react-auth-code-input\n```\n\nor\n\n```bash\nyarn add react-auth-code-input\n```\n\n# Version 3+\n\n## Basic Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport AuthCode from 'react-auth-code-input';\n\nconst App = () =\u003e {\n  const [result, setResult] = useState();\n  const handleOnChange = (res: string) =\u003e {\n    setResult(res);\n  };\n\n  return \u003cAuthCode onChange={handleOnChange} /\u003e;\n};\n```\n\n## Mode\n\nBy default you can type numbers and letters in the inputs as the `allowedCharacters` prop is defaulted to `alphanumeric` but you can also choose between allowing only letters or only numbers by setting the prop to `alpha` or `numeric` respectively.\n\n```tsx\nimport React, { useState } from 'react';\nimport AuthCode from 'react-auth-code-input';\n\nconst App = () =\u003e {\n  const [result, setResult] = useState();\n  const handleOnChange = (res: string) =\u003e {\n    setResult(res);\n  };\n\n  return \u003cAuthCode allowedCharacters='numeric' onChange={handleOnChange} /\u003e;\n};\n```\n\n## Focus\n\nBy default the first input is focused when the component is mounted, you can opt-out from this by setting the `autoFocus` prop to `false`, and then you can handle the focus manually by passing a reference.\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport AuthCode, { AuthCodeRef } from 'react-auth-code-input';\n\nconst App = () =\u003e {\n  const AuthInputRef = useRef\u003cAuthCodeRef\u003e(null);\n  const [result, setResult] = useState();\n  const handleOnChange = (res: string) =\u003e {\n    setResult(res);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cAuthCode\n        autoFocus={false}\n        onChange={handleOnChange}\n        ref={AuthInputRef}\n      /\u003e\n      \u003cbutton onClick={() =\u003e AuthInputRef.current?.focus()}\u003eFocus\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Clear\n\nYou can clear all the inputs by passing a reference and then calling the `clear` method.\n\n```tsx\nimport React, { useRef, useState } from 'react';\nimport AuthCode, { AuthCodeRef } from 'react-auth-code-input';\n\nconst App = () =\u003e {\n  const AuthInputRef = useRef\u003cAuthCodeRef\u003e(null);\n  const [result, setResult] = useState();\n  const handleOnChange = (res: string) =\u003e {\n    setResult(res);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cAuthCode onChange={handleOnChange} ref={AuthInputRef} /\u003e\n      \u003cbutton onClick={() =\u003e AuthInputRef.current?.clear()}\u003eClear\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## SMS Autofill\n\nThis component supports autofill from SMS's received, tested on Safari and Chrome in iOS.\n\n## Props\n\n| Prop                 | Type                    | Description                                                 | Default Value  | Observations                                     |\n| :------------------- | :---------------------- | :---------------------------------------------------------- | :------------- | :----------------------------------------------- |\n| `allowedCharacters`  | String                  | Type of allowed characters for your code.                   | `alphanumeric` | Valid values: `alpha`, `alphanumeric`, `numeric` |\n| `ariaLabel`          | String                  | Accessibility.                                              |                |                                                  |\n| `autoFocus`          | Boolean                 | Wether the first input is focused on mount or not..         | true           | Since version 3.1.0                              |\n| `length`             | Number                  | The number of inputs to display.                            | 6              |                                                  |\n| `containerClassName` | String                  | The styles to be applied to the container.                  |                |                                                  |\n| `inputClassName`     | String                  | The styles to be applied to each input.                     |                |                                                  |\n| `onChange`           | Function(value: String) | Callback function called every time an input value changes. |                | Required                                         |\n| `isPassword`         | Boolean                 | Whether to display the inputs as passwords or not.          | false          |                                                  |\n| `disabled`           | Boolean                 | Makes all the inputs disabled if true.                      | false          | Since version 3.1.1                              |\n| `placeholder`        | String                  | Displays a placeholder in all the inputs.                   |                | Since version 3.2.0                              |\n\n## Changelog\n\n### 3.2.1\n\n- Fix allowing non-numeric characters being introduced in numeric mode on Safari and Firefox.\n\n### 3.2.0\n\n- Add `placeholder` prop.\n- Export component props.\n\n### 3.1.0\n\n- Add `disabled` prop to disable all the inputs.\n- Make the backspace delete the previous character if the current is empty. Previously it just moved the focus making the user hit twice the backspace to delete the value.\n\n### 3.1.0\n\n- Add `autoFocus` prop set to true by default to not break current usages.\n- Expose a `focus` method using references to handle the focus of the first input manually.\n- Expose a `clear` method using references to clear the input programmatically.\n- Add validations for when not using typescript.\n- Update React peerDependency to use any version 16+.\n\n### 3.0.0\n\n- Change the way the allowed characters are handled by using 3 predefined modes: alpha, alphanumeric, and numeric, allowing to have more control when validating the values introduced in the inputs.\n- Improved logic.\n- Improved tests.\n- Improved types.\n\n## License\n\nLicensed under the MIT License, Copyright © 2020-present Luis Guerrero [drac94](https://github.com/drac94).\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrac94%2Freact-auth-code-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrac94%2Freact-auth-code-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrac94%2Freact-auth-code-input/lists"}