{"id":24534825,"url":"https://github.com/arunghosh/react-pin-input","last_synced_at":"2025-04-05T03:07:03.824Z","repository":{"id":18330567,"uuid":"84029273","full_name":"arunghosh/react-pin-input","owner":"arunghosh","description":"React PIN / OTP input component","archived":false,"fork":false,"pushed_at":"2023-08-24T09:43:55.000Z","size":1528,"stargazers_count":109,"open_issues_count":33,"forks_count":45,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T02:03:44.224Z","etag":null,"topics":["input","mpin","otp","pin","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/arunghosh.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}},"created_at":"2017-03-06T04:18:13.000Z","updated_at":"2025-02-13T20:57:18.000Z","dependencies_parsed_at":"2023-10-20T17:48:39.130Z","dependency_job_id":null,"html_url":"https://github.com/arunghosh/react-pin-input","commit_stats":{"total_commits":121,"total_committers":20,"mean_commits":6.05,"dds":0.3553719008264463,"last_synced_commit":"01da3e965424623e607834c940b9617b8a9562a1"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-pin-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-pin-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-pin-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arunghosh%2Freact-pin-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arunghosh","download_url":"https://codeload.github.com/arunghosh/react-pin-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280263,"owners_count":20912967,"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":["input","mpin","otp","pin","react"],"created_at":"2025-01-22T11:19:07.689Z","updated_at":"2025-04-05T03:07:03.805Z","avatar_url":"https://github.com/arunghosh.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/arunghosh"],"categories":[],"sub_categories":[],"readme":"# react-pin-input\n\n_There is [another package](https://github.com/40818419/react-code-input) for managing PIN input. Check and see which suits you better._\n\n**React-PIN-Input is a React component o capture PIN/MPIN like input**\n\n![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin.png)\n\n## Demo\nhttps://codesandbox.io/s/8jnlxw359\n\n## Installation\n```\nnpm install react-pin-input --save\n```\n\n\n## Usage\n\nThe component takes in the length of the PIN and two callback to notifiy change and completion. The ```index``` is the input which is currently in focus.\n\n```javascript\nimport PinInput from 'react-pin-input';\n\n\u003cPinInput \n  length={4} \n  initialValue=\"\"\n  secret\n  secretDelay={100} \n  onChange={(value, index) =\u003e {}} \n  type=\"numeric\" \n  inputMode=\"numeric\"\n  style={{padding: '10px'}}  \n  inputStyle={{borderColor: 'red'}}\n  inputFocusStyle={{borderColor: 'blue'}}\n  onComplete={(value, index) =\u003e {}}\n  autoSelect={true}\n  regexCriteria={/^[ A-Za-z0-9_@./#\u0026+-]*$/}\n/\u003e\n```\n|Attribute|Type|Description|\n|:--|:--|:--|\n|length|number|Number of inputs|\n|initialValue|number\\|string|Initial value of inputs|\n|type|string|Type of input allowed\n||| if ```numeric```, the input will take only numbers|\n||| if ```custom```, the input will take other than numbers|\n|secret|boolean|If you set the ```secret``` attibute, the input will be hidden as shown below.\n|secretDelay|number|If you set the ```secret``` attibute, then you can optionally add secretDelay ms to hide the inputs as you type.\n|disabled|boolean|If you set the ```disable``` attibute, the input will be disabled.\n|focus|boolean| Setting the ```focus``` attibute will set the default focus on the first input element.\n|onChange|function|Callback function invoked on input change. The first parameter is the value and the second is the index of the input that is currently in focus|\n|onComplete|function|Callback function invoked when all inputs have valid values. The first parameter is the value and the second is the index of the input that is currently in focus|\n|style|object|Style for the container `div`\n|inputStyle|object|Style for the input element\n|inputFocusStyle|object|Style for the input element when on focus\n|autoSelect|boolean|Setting ```autoSelect``` to ```false``` will stop automatically highlighting input values on focus. This eliminates popup focus flashing on iOS.|\n|regexCriteria|any|Add validation for ```alphanumeric``` type. *NOTE:* default value is /^[ A-Za-z0-9_@./#\u0026+-]*$/\n\nDisplay when secret is set\n![alt tag](https://github.com/arunghosh/react-pin-input/raw/master/docs/pin-secret.png)\n\n\n## Additional APIs\n\n```javascript\n\u003cPinInput length={4} ref={(n) =\u003e ele=n} /\u003e\n```\n  - ```ele.focus()``` to set focus on the first input element.\n  - ```ele.clear``` to clear the values\n\n## Custom Style\n\nYou can update the style via following props\n - `style`\n - `inputStyle`\n - `inputFocusStyle`\n\nOr another option is to override the default style(shown below is scss. For css [refer](https://github.com/arunghosh/react-pin-input/issues/4) ).\n\n```scss\n.pincode-input-container\n{\n  .pincode-input-text\n  {\n    padding:0 !important;\n    margin:0 2px;\n    text-align:center;\n    border: 1px solid;\n    background: transparent;\n    width: 50px;\n    height: 50px;\n  }\n  .pincode-input-text:focus\n  {\n    outline:none;\n    box-shadow:none;\n  }\n}\n```\n\n\n## For developers\n\n**New build**\n```\nnpm run build\n```\n\n**Run dev server**\n```\nnpm run dev\n```\n\n**Run test**\n```\nnpm run test\n```\n\n\u003ca href=\"https://www.buymeacoffee.com/arunghosh\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-pin-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farunghosh%2Freact-pin-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farunghosh%2Freact-pin-input/lists"}