React Focus Trap

A react component to trap your focus for keyboard events.

It is as simple as wrapping your component with the FocusTrap and rest will be be taken care of.

Installation

Using npm:

$ npm i react-trap-focus

Using yarn:

$ yarn add react-trap-focus

Usage

There are 2 ways in which you can use it.

1) Wrapping any component in it.

The default query selector is [role="button"] but you can pass whatever your application sees fit.

import { FocusTrap } from 'react-trap-focus'

<FocusTrap>
    <Modal.Body>
        // Do Something
    </Modal.Body>
</FocusTrap>

import { FocusTrap } from 'react-trap-focus'

<FocusTrap querySelector={'div.highlighted > p'}>
 // Do something / wrap any component
</FocusTrap>

2) Directly calling the method on keyboard events.

The package also exposes focusTrap = (event: KeyboardEvent, elements: HTMLElement[]) function which can be used directly on keyboard events.

Pass the event and the elements list you want to be focus trapped.

import { focusTrap } from 'react-trap-focus'

  const allButtonEls = document.querySelectorAll('[role="button"]')
  const onKeyDown = event => focusTrap(event, allButtonEls)
  return (
    <div onKeyDown={onKeyDown}>
      // Do something
    </div>
  )