How to use focus-trap-react - 1 common examples

To help you get started, we’ve selected a few focus-trap-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github acl-services / paprika / packages / SidePanel / src / components / FocusTrap / FocusTrap.js View on Github external
    By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's <div> to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative tabindex so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
    escapeDeactivates {boolean}: Default: true. If false, the Escape key will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out.
  fallbackFocus: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]), //

  /** Default: false. If true, a click outside the focus trap will deactivate the focus trap and allow the click event to do its thing. */
  clickOutsideDeactivates: PropTypes.bool,

  /** Default: true. If false, when the trap is deactivated, focus will not return to the element that had focus before activation. */
  returnFocusOnDeactivate: PropTypes.bool,

  children: PropTypes.node.isRequired,

const defaultProps = FocusTrapLibrary.defaultProps;

// shell component for enhancing UXDeveloper
export default function FocusTrap(props) {
  // internal use
  const { focusTrapOptions } = props; // eslint-disable-line
  return <FocusTrapLibrary focusTrapOptions={focusTrapOptions}>{props.children}</FocusTrapLibrary>;

FocusTrap.propTypes = propTypes;
FocusTrap.defaultProps = defaultProps;
FocusTrap.displayName = "SidePanel.FocusTrap";


A React component that traps focus.

Latest version published 21 hours ago

Package Health Score

89 / 100
Full package analysis