@ciceksepeti/cui-focus-trap

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.

Installing

Using Npm:

$ npm install @ciceksepeti/cui-focus-trap

Using Yarn:

$ yarn add @ciceksepeti/cui-focus-trap

Example

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>
  );
}