1.0.18 • Published 3 years ago
use-react-tabtrap v1.0.18
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
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago