Component that traps focus within a DOM node A focus trap ensures that tab and shift + tab keys will cycle through the focus trap's tabbable elements but not leave the focus trap. This is great for making accessible modals.
Using Npm:
$ npm install @ciceksepeti/cui-focus-trap
Using Yarn:
$ yarn add @ciceksepeti/cui-focus-trap
import FocusTrap from "@ciceksepeti/cui-focus-trap";
function Demo() {
return (
<FocusTrap>
<div>
<button>focusable</button>
<button>focusable</button>
<button>focusable</button>
<button disabled>disabled</button>
<button style={{ visibility: "hidden" }}>hidden</button>
<button tabIndex={-1}>tabindex -1</button>
<button>focusable</button>
</div>
</FocusTrap>
);
}