{"id":26546728,"url":"https://github.com/okdv/react-auto-tab","last_synced_at":"2025-03-22T05:20:02.806Z","repository":{"id":112300083,"uuid":"316351185","full_name":"okdv/react-auto-tab","owner":"okdv","description":"Small and independent provider component for simple element auto-inputting. Install on npm: https://www.npmjs.com/package/react-auto-tab","archived":false,"fork":false,"pushed_at":"2021-12-18T00:37:37.000Z","size":2115,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T04:05:38.588Z","etag":null,"topics":["focus","input","reactjs","refs"],"latest_commit_sha":null,"homepage":"https://okdv.github.io/react-auto-tab/","language":"JavaScript","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/okdv.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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-26T22:46:23.000Z","updated_at":"2023-08-08T14:09:41.000Z","dependencies_parsed_at":"2023-05-12T15:45:23.435Z","dependency_job_id":null,"html_url":"https://github.com/okdv/react-auto-tab","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"91fc1bc644ef9af8b3469da3815cb3eb14ac32e3"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okdv%2Freact-auto-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okdv%2Freact-auto-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okdv%2Freact-auto-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okdv%2Freact-auto-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/okdv","download_url":"https://codeload.github.com/okdv/react-auto-tab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244227401,"owners_count":20419240,"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":["focus","input","reactjs","refs"],"created_at":"2025-03-22T05:20:02.235Z","updated_at":"2025-03-22T05:20:02.790Z","avatar_url":"https://github.com/okdv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-auto-tab\n\nreact-auto-tab is a react.js package that brings several tabbing features with little change to your code.\n\n## Demo \n[See the demo/example here!](https://okdv.github.io/react-auto-tab/)\n## Installation\n\nUse the package manager [npm](https://www.npmjs.com) to install react-auto-tab.\n\n```bash\nnpm install react-auto-tab\n```\n## Custom props and settings\n\u003e **propName** - *type* - `defaultValue` : description\n\n**tabbable** : A child of a provider will be included in the tab group if it has this prop. To ignore, simply omit. To suppress some React warnings, `tabbable=\"true\"` is recommended.\n\n**settings** - *object* : Nearly all props live within `settings`, should be a Javascript object. Global overrides go on the provider, local overrides go on any children. Default `settings` are outlined by the defaults below. \n\n___\nAll props below are available as items in the `settings` prop object\n___\n\n**tabOnMax** - *boolean* - `true` : tab when maxLength is met, maxLength must be defined as an integer `maxLength={1}`. \n\n**tabOnKeys** - *array* - `[\"enter\"]` : tab when any key in the array is pressed.\n\n**backTabOnKeys** - *array* - `[\"backspace\"]` : 'backtab' to the previous element when any key in array is pressed, current element value must be blank.\n\n**tabOnChange** - *boolean* - `false` : tab when onchange of current element.\n\n**placement** - *integer* - `placement index in children` : local only, can be used to manually set tabbing order of tabbable elements in the tab group. When used on one child, must be used on all children in that tab group. \n\n**pasteToFit** - *boolean* - `true` : when pasted value is longer than `maxLength` of an element, this will paste the remainder into the next element- until pasted in full, or the end of the tab group.\n\n## Usage\n\n```javascript\nimport {AutoTabProvider} from 'react-auto-tab'\n\nconst VerificationCode = () =\u003e {\n   return (\n      \u003cAutoTabProvider\u003e\n          \u003cinput type=\"text\" maxLength={3} tabbable /\u003e\n          \u003cspan\u003e-\u003c/span\u003e\n          \u003cinput type=\"text\" maxLength={3} tabbable /\u003e\n      \u003c/AutoTabProvider\u003e\n   )\n}\n```\nImport and use the `AutoTabProvider` element as the parent for each tab group. Multiple providers can be present. \n\nUse the `tabbable` prop on any children that should be included in the tab group, they do not have to be direct children. To ignore children, simply omit this prop. \n\n```javascript\nreturn (\n   \u003cAutoTabProvider settings={{tabOnMax:false,backTabOnKeys:[],tabOnKeys:['enter','spacebar']}}\u003e\n      \u003cinput type=\"text\" maxLength={3} tabbable /\u003e {/* no tabOnMax due to global settings */}\n      \u003cinput type=\"text\" maxlength=\"3\" tabbable settings={{tabOnMax:true}} /\u003e {/* no tabOnMax due to maxlength !== maxLength and should be an integer */}\n      \u003cinput type=\"text\" maxLength={3} settings={{tabOnMax:true,tabOnKeys:[]}} /\u003e {/* tabOnMax works, tabOnKeys doesnt */}\n   \u003c/AutoTabProvider\u003e\n)\n```\nAttach a setting onto the `settings` prop on either the provider or its children. On the provider, it will act as global settings. On a child, it will be a local override to the global settings, for that element only.\n\n```xml\n   \u003cAutoTabProvider className=\"tab-group\" id=\"group-1\"\u003e\n      \u003cinput style={{color:\"red\"}} type=\"text\" maxLength={3} onChange={handleChange} tabbable /\u003e\n      \u003cinput type=\"text\" maxLength={3} onKeyDown={() =\u003e console.log(\"hello world\")}} tabbable /\u003e\n      \u003cinput type=\"text\" maxLength={3} onPaste={e =\u003e handlePaste(e)} tabbable /\u003e\n   \u003c/AutoTabProvider\u003e\n```\nUse any of your own props, functions, children, etc. So long it does not use `settings` or `tabbable` as its name. Props on the AutoTabProvider will carry to the `div` it creates.\n\nThe following props have restrictions: `maxLength` must be camelCase and an integer (`maxLength={3}`), `style` must be a JS object\n\nThe follow functions have restrictions: `onChange`, `onKeyDown`, and `onPaste` must be camelCase and cannot be written as an inline string function.\n\n```xml\n\u003cdiv\u003e\n   \u003cAutoTabProvider\u003e\n      \u003cdiv\u003e\n         \u003cinput type=\"text\" tabbable /\u003e \n      \u003c/div\u003e\n      \u003cinput type=\"text\" tabbable /\u003e\n   \u003c/AutoTabProvider\u003e\n   \u003cAutoTabProvider\u003e\n      \u003cinput type=\"radio\" tabbable /\u003e\n      \u003cselect tabbable\u003e\n         \u003coption\u003eone\u003c/option\u003e\n         \u003coption\u003eone\u003c/option\u003e\n      \u003c/select\u003e\n      \u003ctextarea tabbable\u003e\n      \u003cinput type=\"checkbox\" tabbable /\u003e\n   \u003c/AutoTabProvider\u003e\n\u003c/div\u003e\n``` \nUse multiple providers, put tabbable children several elements deep, use any element that can handle focus and an `onChange` event. The package is very flexible to fit most use-cases. \n\n```javascript\nconst myRef = React.createRef()\n\nconst CustomInput = React.forwardRef((props,ref) =\u003e (\n   \u003cinput ref={ref} onChange={props.onChange} onKeyDown={props.onKeyDown} onPaste={props.onPaste} /\u003e\n))\n\nconst App = () =\u003e {\n   return (\n      \u003cAutoTabProvider\u003e\n         \u003cinput type=\"text maxLength={2} tabbable /\u003e\n         \u003cCustomInput ref={myRef} tabbable /\u003e\n         \u003cinput type=\"text maxLength={2} tabbable /\u003e\n      \u003c/AutoTabProvider\u003e\n)}\n```\nUse with custom elements, so long that element can do a few things: \n\n - Forward a custom `ref` to an element it renders\n - Handle `onChange`, `onKeyDown`, and `onPaste` on the same element receiving the \nforwarded `ref`\n\nThis also provides some insight into how you can insert custom refs for elements. Otherwise, the package will create its own `ref` for each tabbable element. [See the React refs documentation for more info](https://reactjs.org/docs/refs-and-the-dom.html).\n\n## Known issues, limitations and notes\n - To suppress React warning: \"Received `true` got a non-boolean attribute `tabbable`\", add a string of \"true\" to the prop, example: `tabbable=\"true\"`\n - Props utilized by the package must be in camelCase and have an inline JS value, examples: `onChange={handleChange}`, `style={{width:\"1px\"}}`, `maxLength={2}`, etc\n - Providers cannot be placed within one another\n - Has not been tested with callback refs or \u003e React v16.3\n - Known working elements:`input`, `textarea`, and `select`\n - Known working input types: checkbox (`onChange` only), color (`onChange` only), date (`onChange` only), datetime-local (`onChange` only), email, file (`onChange` only), image (`onChange` only), month (`onChange` only), number, password, radio (`onChange` only), range (`onChange` only), search, tel, text, time (`onChange` only), url, week (`onChange` only)\n\n## Migrating from 1.X.X\nThe migration is simple. The same `AutoTabProvider` is used, options/settings available are still stored within the `settings` prop of the provider.\n\nPackage options on children are now located inside a `settings` prop as well. So `\u003cinput type=\"text\" maxLength=\"3\" focusonmax=\"true\" /\u003e` will now become `\u003cinput type=\"text\" maxLength={3} settings={{tabOnMax:true}} tabbable /\u003e`. \n\nCertain props like `maxLength` and `style` cannot equal a string, see docs. Must be camelCase.  \n\nCertain props like `ignorefocus` have been deprecated. Instead use `tabbable` when a child should be tabbable, and omit this when it should be ignored. \n\nWhile many prop names changed, they carry the same functions mostly. The change mappings are below:\n - `prevonkey` =\u003e `backTabOnKeys`\n - `nextonkey` =\u003e `tabOnKeys`\n - `nextonmax` =\u003e `tabOnMax`\n\nThere are some new props and instructions for custom props and functions. Review docs for this information.\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n[MIT](https://choosealicense.com/licenses/mit/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokdv%2Freact-auto-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokdv%2Freact-auto-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokdv%2Freact-auto-tab/lists"}