react-tab-portal
v0.0.4
Customize the tab order to jump to a different section of the document _without_ modifying every single `tabindex` on the entire page!
0/weekUpdated 1 years agoMITUnpacked: 28.7 KB
Published by exogen
npm install react-tab-portal
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!
!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).
Support
Did this project bring you joy? Want to support updates? Check out
my GitHub Sponsors page.
Alternatively…
Usage
Every tab portal must have a
elements you want to be out of order) and a
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
two ways.
$3
Wrap both elements in an ancestor
Because they share the same ancestor
``jsx
import { TabPortal } from "react-tab-portal";
function MyComponent() {
return (
);
}
`
$3
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 (
<>
);
}
``