{"id":23039309,"url":"https://github.com/javadbat/jb-pin-input-react","last_synced_at":"2026-03-20T00:18:30.856Z","repository":{"id":61545096,"uuid":"549182236","full_name":"javadbat/jb-pin-input-react","owner":"javadbat","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-13T21:36:28.000Z","size":11,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-09T13:01:12.130Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/javadbat.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":"2022-10-10T19:59:29.000Z","updated_at":"2024-10-13T21:36:32.000Z","dependencies_parsed_at":"2024-06-27T10:29:47.524Z","dependency_job_id":null,"html_url":"https://github.com/javadbat/jb-pin-input-react","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.1428571428571429,"last_synced_commit":"38d64e11df42f841d532d44d682c09c2c488b5f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-pin-input-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-pin-input-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-pin-input-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-pin-input-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-pin-input-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859824,"owners_count":18135517,"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":"2024-12-15T18:30:09.698Z","updated_at":"2026-03-20T00:18:30.775Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JBPinInput React component\n\n\u003e [!WARNING]  \n\u003e this package is deprecated and moved to [jb-pin-input/react](https://github.com/javadbat/jb-pin-input/tree/main/react)\n\nthis component is React.js wrapper for [jb-pin-input](https://www.npmjs.com/package/jb-pin-input) web component with these benefits:\n- smart paste algorithm\n- mobile freindly\n- light and fast\n- support typescript\n- accept persian \u0026 arabic number char\n\nsample in codepen:\u003chttps://codepen.io/javadbat/pen/zYPEqNJ\u003e\nsample in github:\u003chttps://javadbat.github.io/jb-pin-input\u003e\n## install\n\nrun following command to install it with npm\n```cmd\nnpm i jb-pin-input-react\n```\n\n## usage\n\njust import the package and use it like other react component\n\n```jsx\nimport {JBPinInput} from 'jb-pin-input-react'\n\n\u003cJBPinInput\u003e\u003c/JBPinInput\u003e\n```\n## char length\n\nif you want to change the pin length to 5digit or 10 digit or anything elese you just have to provide ti to charLength Prop\n\n```jsx\n\u003cJBPinInput charLength={5}\u003e\u003c/JBPinInput\u003e\n```\n\n## autofocus\n\nif you want pin input get focus as rendered in app just add autofocus props\n```jsx\n\u003cJBPinInput autofocus\u003e\u003c/JBPinInput\u003e\n```\n\n### set custome style\n\nin some cases in your project you need to change defualt style of web-component for example you need zero margin or different border-radius and etc.  \nif you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component\n| css variable name                          | description                                                                                   |\n| -------------                              | -------------                                                                                 |\n| --jb-pin-input-inputs-wrapper-width        | width of inputs wrapper,default is `100%`                                                     |\n| --jb-pin-input-bottom-line-color           | color of bottom line of each number.  default value is `#9DA6B6`                              |\n| --jb-pin-input-bottom-line-border-radius   | border radius of bottom line.  default value is `16px`                                        |\n| --jb-pin-input-bottom-line-height          | height of bottom line of each number. default value is `4px`                                  |\n| --jb-pin-input-bottom-line-display         | display of bottom line of each number. default value is `block`                               |\n| --jb-pin-input-bottom-line-color-active    | color of bottom line of each number when user focus on it. default value is `#1565D8`         |\n| --jb-pin-input-wrapper-border-width        | border width of each number input wrapper. default value is `0`                               |\n| --jb-pin-input-wrapper-border-color        | border color of each number input wrapper. default value is `black`                           |\n| --jb-pin-input-wrapper-border-style        | border style of  each number input wrapper. default value is `solid`                          |\n| --jb-pin-input-wrapper-border-color-active | border color of each number input wrapper  when user focus on it. default value is `#1565D8`  |\n| --jb-pin-input-pin-color                   | color of inputed text.default value is #333                                                   |\n| --jb-pin-input-pin-height                  | height of  each number input. default value is `40px`                                         |\n| --jb-pin-input-pin-font-size               | font size of  each number input. default value is `24`                                        |   \n| --jb-pin-input-pin-font-weight             | font weight of  each number input. default value is `900`                                     |   \n| --jb-pin-input-wrapper-box-shadow          | border width of each number input wrapper. default value is `none`                            |\n| --jb-pin-input-error-message-margin        | margin of error message. default value is `0`                                                 |\n| --jb-pin-input-error-message-color         | color of error message. default value is `#dc3545`                                            |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-pin-input-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-pin-input-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-pin-input-react/lists"}