1.0.18 • Published 4 years ago

use-react-tabtrap v1.0.18

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Build Status Coverage Status

use-react-tabtrap

React hook for adding Tab-trapping functionality.

use-react-tabtrap will give a React Component Tab-trapping functionality by
adding 'keydown' listener window. 

Props

    {
        cleanUp: () => void // function for toggling trigger such as on and off modal.
        ref: MutableObject<T extends HTMLElement | null>
        trigger: boolean //  a boolean value represents whether tabtrap needs
        focusable?: string // comma seperated string of querySelectorAll
        // usually you don't need to pass it, default value of focusable deals with the most case of focusable elements.
    }

Usage

create a React.MutableRefObject by useRef. and give the ref to both the target component and prop of use-react-tabtrap hook.
    UseReactTabTrap({
        ref,
        trigger,
        cleanUp,
    });
    /*
    ....
    */
   <div
    ref={ref}
   >
   </div>

Supported key list

  • ESC or ESCAPE: will excute cleanUp function. cleanUp could be a function to toggle modal or blur on specific element

  • Tab or Shift+Tab : will focus the next or the previous focusable elements

  • ArrowDown or ArrowUp : will focus the next or the previous focusable elements

Fix logs

  • Version 1.0.11 : change module to common js not to make error on production build.
  • Version 1.0.12 : remove unnecessary files.
  • Version 1.0.14 : supports commonjs/ESM all.
  • Version 1.0.15 : Now pressing Esc key fully works on Safari.
  • Version 1.0.17 : FIX NPM SEM versioning.(compatible with React >=16.13.0)

Coming up next

  • some more keys will be added
  • a custom key map could be available.
  • a custom key handler code.
1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago