https://github.com/exogen/react-tab-portal
Customize tab order without modifying every single tabindex!
https://github.com/exogen/react-tab-portal
Last synced: over 1 year ago
JSON representation
Customize tab order without modifying every single tabindex!
- Host: GitHub
- URL: https://github.com/exogen/react-tab-portal
- Owner: exogen
- License: mit
- Created: 2020-03-04T17:39:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T08:09:11.000Z (over 1 year ago)
- Last Synced: 2025-03-16T02:47:36.795Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 3.15 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
react-tab-portal 
Customize the tab order to jump to a different section of the document _without_
modifying every single `tabindex` on the entire page!
Useful when you have a component (like a dropdown) whose DOM hierarchy cannot match
the 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).
## Support
Did this project bring you joy? Want to support updates? Check out
[my GitHub Sponsors page](https://github.com/sponsors/exogen).
Alternatively…
## Usage
Every tab portal must have a `` (the section of tabbable
elements you want to be out of order) and a `` (the element
that will skip you to the content when reached in the tab order). Think of the
portal like an entrance to the content, and the end of the content has an exit
back to the portal!
You can link the `` and `` elements in
two ways.
### Automatic grouping via context
Wrap both elements in an ancestor `` to automatically link them.
Because they share the same ancestor ``, they are linked.
```jsx
import { TabPortal } from "react-tab-portal";
function MyComponent() {
return (
One
Two
Apples
Bananas
Carrots
);
}
```
### Explicit grouping via useTabPortal
Pass the result of `useTabPortal` to the `to` and `from` props to link the
`` and `` elements manually.
```jsx
import { TabPortal, useTabPortal } from "react-tab-portal";
function MyComponent() {
const tabPortal = useTabPortal();
return (
<>
One
Two
Apples
Bananas
Carrots
>
);
}
```
## How it works
