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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.783latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.783
0.1.633
0.1.521
0.1.40
0.1.33
0.1.20
0.1.11
0.1.00
0.0.110
0.0.101
0.0.91
0.0.80
0.0.70
0.0.61
0.0.50
0.0.40
0.0.30
0.0.20
0.0.10

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