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.