Customize the tab order to jump to a different section of the document _without_ modifying every single `tabindex` on the entire page!
npm install react-tab-portalCustomize the tab order to jump to a different section of the document _without_
modifying every single tabindex on the entire page!
!Demo
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).
Did this project bring you joy? Want to support updates? Check out
my GitHub Sponsors page.
Alternatively…
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.
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 (
);
}
`
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 (
<>