{"id":16292475,"url":"https://github.com/exogen/react-tab-portal","last_synced_at":"2025-03-16T13:31:33.667Z","repository":{"id":40849905,"uuid":"244964611","full_name":"exogen/react-tab-portal","owner":"exogen","description":"Customize tab order without modifying every single tabindex!","archived":false,"fork":false,"pushed_at":"2024-10-28T08:09:11.000Z","size":3302,"stargazers_count":15,"open_issues_count":16,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T02:47:36.795Z","etag":null,"topics":[],"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/exogen.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},"funding":{"github":"exogen","buy_me_a_coffee":"mosswood"}},"created_at":"2020-03-04T17:39:34.000Z","updated_at":"2025-03-10T13:19:56.000Z","dependencies_parsed_at":"2024-10-27T10:52:19.522Z","dependency_job_id":"ee1f7950-defc-4b56-ab0d-2a2594a92afa","html_url":"https://github.com/exogen/react-tab-portal","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.125,"last_synced_commit":"de5e5eea15d0d25f4b74d5519b447749252ee19b"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-tab-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-tab-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-tab-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-tab-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exogen","download_url":"https://codeload.github.com/exogen/react-tab-portal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243875170,"owners_count":20361962,"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-10-10T20:06:58.601Z","updated_at":"2025-03-16T13:31:33.190Z","avatar_url":"https://github.com/exogen.png","language":"JavaScript","funding_links":["https://github.com/sponsors/exogen","https://buymeacoffee.com/mosswood","https://www.buymeacoffee.com/mosswood"],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"./portal-left.png\" height=\"40\" alt=\"\" valign=\"middle\"\u003e react-tab-portal \u003cimg src=\"./portal-right.png\" height=\"40\" alt=\"\" valign=\"middle\"\u003e\n\nCustomize the tab order to jump to a different section of the document _without_\nmodifying every single `tabindex` on the entire page!\n\n![Demo](./demo.gif)\n\nUseful when you have a component (like a dropdown) whose DOM hierarchy cannot match\nthe desired tab order for design purposes (e.g. it needs to reference a different `position: relative` parent, or stay in flow to take up the available width/height).\n\n## Support\n\nDid this project bring you joy? Want to support updates? Check out\n[my GitHub Sponsors page](https://github.com/sponsors/exogen).\n\nAlternatively…\n\n\u003ca href=\"https://www.buymeacoffee.com/mosswood\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\"\u003e\u003c/a\u003e\n\n## Usage\n\nEvery tab portal must have a `\u003cTabPortal.Content\u003e` (the section of tabbable\nelements you want to be out of order) and a `\u003cTabPortal.Portal\u003e` (the element\nthat will skip you to the content when reached in the tab order). Think of the\nportal like an entrance to the content, and the end of the content has an exit\nback to the portal!\n\nYou can link the `\u003cTabPortal.Content\u003e` and `\u003cTabPortal.Portal\u003e` elements in\ntwo ways.\n\n### Automatic grouping via context\n\nWrap both elements in an ancestor `\u003cTabPortal\u003e` to automatically link them.\nBecause they share the same ancestor `\u003cTabPortal\u003e`, they are linked.\n\n```jsx\nimport { TabPortal } from \"react-tab-portal\";\n\nfunction MyComponent() {\n  return (\n    \u003cTabPortal\u003e\n      \u003cdiv\u003e\n        \u003cinput placeholder=\"Foo\" /\u003e\n        \u003cTabPortal.Portal /\u003e\n        \u003cbutton\u003eOne\u003c/button\u003e\n        \u003cbutton\u003eTwo\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cTabPortal.Content\u003e\n        \u003cselect\u003e\n          \u003coption\u003eApples\u003c/option\u003e\n          \u003coption\u003eBananas\u003c/option\u003e\n          \u003coption\u003eCarrots\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/TabPortal.Content\u003e\n      \u003cinput placeholder=\"Bar\" /\u003e\n    \u003c/TabPortal\u003e\n  );\n}\n```\n\n### Explicit grouping via useTabPortal\n\nPass the result of `useTabPortal` to the `to` and `from` props to link the\n`\u003cTabPortal.Portal\u003e` and `\u003cTabPortal.Content\u003e` elements manually.\n\n```jsx\nimport { TabPortal, useTabPortal } from \"react-tab-portal\";\n\nfunction MyComponent() {\n  const tabPortal = useTabPortal();\n\n  return (\n    \u003c\u003e\n      \u003cdiv\u003e\n        \u003cinput placeholder=\"Foo\" /\u003e\n        \u003cTabPortal.Portal to={tabPortal} /\u003e\n        \u003cbutton\u003eOne\u003c/button\u003e\n        \u003cbutton\u003eTwo\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cTabPortal.Content from={tabPortal}\u003e\n        \u003cselect\u003e\n          \u003coption\u003eApples\u003c/option\u003e\n          \u003coption\u003eBananas\u003c/option\u003e\n          \u003coption\u003eCarrots\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/TabPortal.Content\u003e\n      \u003cinput placeholder=\"Bar\" /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## How it works\n\n![Diagram](./diagram.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Freact-tab-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexogen%2Freact-tab-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Freact-tab-portal/lists"}