{"id":16364538,"url":"https://github.com/keyurparalkar/react-headless-passcode","last_synced_at":"2025-10-15T03:53:52.910Z","repository":{"id":172918459,"uuid":"649493825","full_name":"keyurparalkar/react-headless-passcode","owner":"keyurparalkar","description":"A headless library for Passcode component","archived":false,"fork":false,"pushed_at":"2023-11-27T09:41:11.000Z","size":974,"stargazers_count":14,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"release","last_synced_at":"2024-10-12T02:30:39.941Z","etag":null,"topics":["component-library","form","headlessui","hooks","otp","passcode","react","reactjs"],"latest_commit_sha":null,"homepage":"https://l84svd.csb.app/","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/keyurparalkar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-05T01:59:15.000Z","updated_at":"2024-10-06T09:13:18.000Z","dependencies_parsed_at":"2023-11-27T10:36:36.883Z","dependency_job_id":"e634ce79-5f3f-4e1b-9ff8-21d3333668bf","html_url":"https://github.com/keyurparalkar/react-headless-passcode","commit_stats":null,"previous_names":["keyurparalkar/otp-component","keyurparalkar/react-headless-passcode","keyurparalkar/react-headless-otp"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyurparalkar%2Freact-headless-passcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyurparalkar%2Freact-headless-passcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyurparalkar%2Freact-headless-passcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keyurparalkar%2Freact-headless-passcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keyurparalkar","download_url":"https://codeload.github.com/keyurparalkar/react-headless-passcode/tar.gz/refs/heads/release","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221842519,"owners_count":16890157,"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":["component-library","form","headlessui","hooks","otp","passcode","react","reactjs"],"created_at":"2024-10-11T02:30:34.233Z","updated_at":"2025-10-15T03:53:52.813Z","avatar_url":"https://github.com/keyurparalkar.png","language":"TypeScript","readme":"![headless-passcode-header-image](media/react-headless-passcode.001.jpeg)\n\n# react-headless-passcode\n\nA headless UI for building easy to use passcode component.\n\n_What is an passcode component?_\nIt is a group of input elements with each element only accepting one character. This component is generally used in authentication flows.\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Features](#features)\n-   [API](#api)\n-   [License](#license)\n\n## Installation\n\n```shell\nyarn add react-headless-passcode\n```\n\n## Usage\n\n```tsx\nimport { usePasscode } from \"react-headless-passcode\";\n```\n\nWith the `usePasscode` hook you just need to pass the `count` property and in return you get the `array` in which the actual passcode value is stored, various event hanlders that handles the focus management logic between multiple inputs and `refs` that references each input element.\n\nFor example:\n\n```tsx\nconst PasscodeComponent = () =\u003e {\n    const { array, getEventHandlers, refs } = usePasscode({\n        count: 4,\n    });\n\n    return (\n        \u003c\u003e\n            {array.map((value, index) =\u003e {\n                const { ...rest } = getEventHandlers(index);\n                return (\n                    \u003cinput\n                        className=\"single-input\"\n                        ref={(el) =\u003e el \u0026\u0026 (refs.current[index] = el)}\n                        type=\"text\"\n                        inputMode=\"numeric\"\n                        autoComplete=\"one-time-code\"\n                        maxLength={1}\n                        pattern=\"\\d{1}\"\n                        value={String(value)}\n                        key={`index-${index}`}\n                        {...rest}\n                    /\u003e\n                );\n            })}\n        \u003c/\u003e\n    );\n};\n```\n\n\u003e **NOTE:**\n\u003e It is important to initialize the `refs` object with the current input element because this is how the `usepasscode` is able to track the current index and manage the focused state across multiple inputs. Make sure to assign this element to the `refs` or else the focus won't change!!\n\n```tsx\nref={(el) =\u003e el \u0026\u0026 (refs.current[index] = el)}\n```\n\n## Features\n\n-   Allow entering alpha numeric characters\n-   Expose a flag: `isComplete` that tells whether all the input boxes are filled or not\n-   Expose a state variable: `currentFocusedIndex`. It tells us the currently focused index of the passcode component.\n-   Exposes event handlers that can be seamlessly used with the input element.\n-   Passcode value can be pasted partially, fully, from start, or from middle.\n\n## API\n\nThe `usePasscode` hook accepts following props\n| Prop Name | Type | Description |\n|---------------- |------------------------ |----------------------------------------------------------------------- |\n| count | `number` | Number of input boxes to create in the passcode component |\n| isAlphaNumeric | `boolean` | If `true`, allows to enter alpha numeric value in the component |\n\nThe hook returns an object that consists of:\n\n| Property               | Type                                               | Description                                                                                                                                                                          |\n| ---------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| passcode               | `(string \\| number)[]`                             | The current array value of the entire component.                                                                                                                                     |\n| setPasscode            | `function`                                         | A function that sets the internal state variable:`passcode`'s value inside the hook.                                                                                                 |\n| currentFocusedIndex    | `number`                                           | Index of the currently focused input element.                                                                                                                                        |\n| setCurrentFocusedIndex | `function`                                         | A function that sets the internal state variable: `currentFocusedIndex`'s value inside the hook.                                                                                     |\n| getEventHandler        | `function`                                         | A function that accepts an index as a parameter. It returns the following event handlers for the input positioned at index `i`: `onChange` `onFocus` `onKeyUp` `onKeyDown` `onPaste` |\n| refs                   | `React.MutableRefObject\u003cHTMLInputElement[] \\| []\u003e` | A ref array that contains reference of all the input boxes.                                                                                                                          |\n| isComplete             | `boolean`                                          | A boolean flag that tells if all the input boxes are filled or not.                                                                                                                  |\n\n## License\n\nReact is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyurparalkar%2Freact-headless-passcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyurparalkar%2Freact-headless-passcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyurparalkar%2Freact-headless-passcode/lists"}