@ciceksepeti/cui-focus-trap
TypeScript icon, indicating that this package has built-in type declarations

0.1.7 • Public • Published

@ciceksepeti/cui-focus-trap

npm version storybook PRs Welcome license

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

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @ciceksepeti/cui-focus-trap

    Weekly Downloads

    144

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    61.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • admin.it