{"id":24874625,"url":"https://github.com/dirheimerb/react-next-passcode","last_synced_at":"2025-03-27T02:15:38.290Z","repository":{"id":181898621,"uuid":"667633629","full_name":"dirheimerb/react-next-passcode","owner":"dirheimerb","description":"Created with CodeSandbox","archived":false,"fork":false,"pushed_at":"2023-10-07T23:32:15.000Z","size":122,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T15:17:32.770Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/github/dirheimerb/react-next-passcode","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/dirheimerb.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-18T01:04:07.000Z","updated_at":"2023-07-18T01:04:15.000Z","dependencies_parsed_at":"2025-02-03T22:45:34.289Z","dependency_job_id":null,"html_url":"https://github.com/dirheimerb/react-next-passcode","commit_stats":null,"previous_names":["dirheimerb/react-next-passcode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Freact-next-passcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Freact-next-passcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Freact-next-passcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirheimerb%2Freact-next-passcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirheimerb","download_url":"https://codeload.github.com/dirheimerb/react-next-passcode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245767360,"owners_count":20668826,"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":[],"created_at":"2025-02-01T07:28:02.293Z","updated_at":"2025-03-27T02:15:38.271Z","avatar_url":"https://github.com/dirheimerb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Next Passcode OTP Input Component in React\n\n\u003e An open-source TypeScript library for implementing a One-Time Password (OTP) input component in React.\n\n## Introduction\n\nThe OTP input component is a collection of input boxes that allows users to enter a one-time password or passcode character by character. This component is commonly used in web and mobile applications for security and validation purposes. This README provides an overview of the OTP input component and explains how to implement it in React, including key scenarios and code implementation.\n\n## Key Features\n\n- Accepts a single character in each input box\n- Automatically shifts focus to the next input box on character entry\n- Shifts focus to the previous input box when backspacing\n- Handles pasting from the clipboard with user-friendly behavior\n- Supports advanced scenarios such as determining focus after pasting\n\n## Installation\n\nTo use the OTP input component in your React project, you can install it from NPM:\n\n```bash\nnpm install otp-input-component\n```\n\nor\n\n```bash\nyarn add otp-input-component\n```\n\n## Usage\n\nHere's an example of how to use the OTP input component in your React application:\n\n```jsx\nimport React, { useState } from 'react'\nimport OTPInput from 'otp-input-component'\n\nfunction App() {\n  const [otp, setOtp] = useState('')\n\n  const handleOTPChange = (value) =\u003e {\n    setOtp(value)\n  }\n\n  const handleOTPSubmit = () =\u003e {\n    // Perform validation or submit the OTP\n    console.log('Entered OTP:', otp)\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eEnter OTP\u003c/h1\u003e\n      \u003cOTPInput\n        value={otp}\n        onChange={handleOTPChange}\n        onSubmit={handleOTPSubmit}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Props\n\nThe OTP input component accepts the following props:\n\n- `value` (string): The current value of the OTP input.\n- `onChange` (function): A callback function that is called whenever the OTP input value changes. It receives the updated value as a parameter.\n- `onSubmit` (function): A callback function that is called when the OTP input is submitted. It can be used for validation or to trigger further actions.\n- `length` (number): The number of input boxes for the OTP. Defaults to 4.\n- `secure` (boolean): Whether to display asterisks (\\*) instead of the actual input value. Defaults to true.\n- `placeholder` (string): The placeholder text for each input box. Defaults to an empty string.\n\n## Contributing\n\nContributions are welcome! If you have any improvements or new features to add, please submit a pull request. Make sure to follow the code style and add appropriate tests.\n\n## License\n\nThis library is open-source and available under the [MIT License](https://opensource.org/licenses/MIT). Feel free to use, modify, and distribute it as per the terms of the license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirheimerb%2Freact-next-passcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirheimerb%2Freact-next-passcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirheimerb%2Freact-next-passcode/lists"}