{"id":13445824,"url":"https://github.com/focus-trap/focus-trap-react","last_synced_at":"2025-05-13T21:06:01.807Z","repository":{"id":36473300,"uuid":"40778753","full_name":"focus-trap/focus-trap-react","owner":"focus-trap","description":"A React component that traps focus","archived":false,"fork":false,"pushed_at":"2025-05-07T05:03:20.000Z","size":9592,"stargazers_count":738,"open_issues_count":12,"forks_count":62,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T12:45:32.028Z","etag":null,"topics":["dependabot","focus-trap","react-a11y","tappable"],"latest_commit_sha":null,"homepage":"http://focus-trap.github.io/focus-trap-react/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/focus-trap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.MD","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-08-15T18:55:44.000Z","updated_at":"2025-05-07T12:25:04.000Z","dependencies_parsed_at":"2023-01-17T02:00:44.944Z","dependency_job_id":"28e1bdac-0290-42eb-aafa-b1f6dcac90be","html_url":"https://github.com/focus-trap/focus-trap-react","commit_stats":{"total_commits":964,"total_committers":33,"mean_commits":29.21212121212121,"dds":"0.28319502074688796","last_synced_commit":"d1e5288c2902ee9b2aeda199d6b6169fee8b38b7"},"previous_names":["davidtheclark/focus-trap-react"],"tags_count":75,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focus-trap%2Ffocus-trap-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focus-trap%2Ffocus-trap-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focus-trap%2Ffocus-trap-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focus-trap%2Ffocus-trap-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focus-trap","download_url":"https://codeload.github.com/focus-trap/focus-trap-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253309310,"owners_count":21887972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dependabot","focus-trap","react-a11y","tappable"],"created_at":"2024-07-31T05:00:40.184Z","updated_at":"2025-05-13T21:05:56.789Z","avatar_url":"https://github.com/focus-trap.png","language":"JavaScript","funding_links":[],"categories":["Utilities","JavaScript"],"sub_categories":["WIP/Need Awesomeification"],"readme":"# focus-trap-react [![CI](https://github.com/focus-trap/focus-trap-react/workflows/CI/badge.svg?branch=master\u0026event=push)](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [![Codecov](https://img.shields.io/codecov/c/github/focus-trap/focus-trap-react)](https://codecov.io/gh/focus-trap/focus-trap-react) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-30-orange.svg?style=flat-square)](#contributors)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nA React component that traps focus.\n\nThis component is a light wrapper around [focus-trap](https://github.com/focus-trap/focus-trap),\ntailored to your React-specific needs.\n\nYou might want it for, say, building [an accessible modal](https://github.com/davidtheclark/react-aria-modal)?\n\n## What it does\n\n[Check out the demo](http://focus-trap.github.io/focus-trap-react/demo/).\n\nPlease read [the focus-trap documentation](https://github.com/focus-trap/focus-trap) to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.\n\nThis module simply provides a React component that creates and manages a focus trap.\n\n- The focus trap automatically activates when mounted (by default, though this can be changed).\n- The focus trap automatically deactivates when unmounted.\n- The focus trap can be activated and deactivated, paused and unpaused via props.\n\n## Installation\n\n```\nnpm install focus-trap-react\n```\n\n`dist/focus-trap-react.js` is the Babel-compiled file that you'll use.\n\n### React dependency\n\nReact `\u003e= 18.0.0`\n\n\u003e Note that while React 18.x still supported `propTypes` and `defaultProps`, they had long-since been deprecated, and are completely dropped in React 19.\n\nTherefore, this library no longer assigns these properties to the `\u003cFocusTrap\u003e` element for runtime validation and initialization. The same techniques you would now use in React 19 are backward-compatible with React 18:\n\n- Use TypeScript for static prop type validation\n- Use a runtime validation library such as [RTV.js](https://rtvjs.stefcameron.com/), [JSON Schema](https://json-schema.org/), or [yup](https://github.com/jquense/yup) for runtime prop validation to replace `prop-types`)\n\n\u003e This library aims to support one major version of React _behind_ the current major version, since React major releases are typically years apart -- to the extent that the feature drift is not too great and remains reasonably surmountable.\n\n## Browser Support\n\nFocused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.\n\nGated by what React [supports](https://legacy.reactjs.org/docs/javascript-environment-requirements.html) in the version [currently](#react-dependency) supported.\n\nFocus-trap-react is not officially tested on any mobile browsers or devices.\n\n\u003e ⚠️ Microsoft [no longer supports](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) any version of IE, so IE is no longer supported by this library.\n\n\u003e 💬 Focus-trap-react relies on focus-trap so its browser support is at least [what focus-trap supports](https://github.com/focus-trap/focus-trap#browser-support).\n\n\u003e 💬 Keep in mind that performance optimization and old browser support are often at odds, so tabbable may not always be able to use the most optimal (typically modern) APIs in all cases.\n\n## Usage\n\nYou wrap any element that you want to act as a focus trap with the `\u003cFocusTrap\u003e` component. `\u003cFocusTrap\u003e` expects exactly one child element which can be any HTML element or other React component that contains focusable elements. __It cannot be a Fragment__ because `\u003cFocusTrap\u003e` needs to be able to get a reference to the underlying HTML element, and Fragments do not have any representation in the DOM.\n\nFor example:\n\n```js\n\u003cFocusTrap\u003e\n  \u003cdiv id=\"modal-dialog\" className=\"modal\" \u003e\n    \u003cbutton\u003eOk\u003c/button\u003e\n    \u003cbutton\u003eCancel\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/FocusTrap\u003e\n```\n\n```js\n\u003cFocusTrap\u003e\n  \u003cModalDialog okButtonText=\"Ok\" cancelButtonText=\"Cancel\" /\u003e\n\u003c/FocusTrap\u003e\n```\n\nYou can read further code examples in `demo/` (it's very simple), and [see how it works](http://focus-trap.github.io/focus-trap-react/demo/).\n\nHere's one more simple example:\n\n```jsx\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { FocusTrap } from 'focus-trap-react';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      activeTrap: false\n    };\n\n    this.mountTrap = this.mountTrap.bind(this);\n    this.unmountTrap = this.unmountTrap.bind(this);\n  }\n\n  mountTrap = () =\u003e {\n    this.setState({ activeTrap: true });\n  };\n\n  unmountTrap = () =\u003e {\n    this.setState({ activeTrap: false });\n  };\n\n  render() {\n    const trap = this.state.activeTrap\n      ? \u003cFocusTrap\n          focusTrapOptions={{\n            onDeactivate: this.unmountTrap\n          }}\n        \u003e\n          \u003cdiv className=\"trap\"\u003e\n            \u003cp\u003e\n              Here is a focus trap\n              {' '}\n              \u003ca href=\"#\"\u003ewith\u003c/a\u003e\n              {' '}\n              \u003ca href=\"#\"\u003esome\u003c/a\u003e\n              {' '}\n              \u003ca href=\"#\"\u003efocusable\u003c/a\u003e\n              {' '}\n              parts.\n            \u003c/p\u003e\n            \u003cp\u003e\n              \u003cbutton onClick={this.unmountTrap}\u003e\n                deactivate trap\n              \u003c/button\u003e\n            \u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/FocusTrap\u003e\n      : false;\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003e\n          \u003cbutton onClick={this.mountTrap}\u003e\n            activate trap\n          \u003c/button\u003e\n        \u003c/p\u003e\n        {trap}\n      \u003c/div\u003e\n    );\n  }\n}\n\ncreateRoot(document.getElementById('root')).render(\u003cDemo /\u003e); // React 18\n```\n\n## ❗️❗️ React 18 Strict Mode ❗️❗️\n\nReact 18 introduced [new behavior](https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) in Strict Mode whereby it mimics a possible future behavior where React might optimize an app's performance by unmounting certain components that aren't in use and later remounting them with previous, reused state when the user needs them again. What constitutes \"not in use\" and \"needs them again\" is as yet undefined.\n\n_Remounted with reused state_ is the key difference between what is otherwise expected about [unmounted components](https://reactjs.org/docs/react-component.html#componentwillunmount).\n\n__[v9.0.2](https://github.com/focus-trap/focus-trap-react/pull/721) adds support__ for this new Strict Mode behavior: The trap attempts to detect that it has been remounted with previous state: If the `active` prop's value is `true`, and an internal focus trap instance already exists, the focus trap is re-activated on remount in order to reconcile stated expectations.\n\n\u003e 🚨 In Strict Mode (and so in dev builds only, since this behavior of Strict Mode only affects dev builds), the trap __will be deactivated as soon as it is mounted__, and then reactivated again, almost immediately, because React will immediately unmount and remount the trap as soon as it's rendered.\n\nTherefore, __avoid using options like onActivate, onPostActivate, onDeactivate, or onPostDeactivate to affect component state__.\n\n\u003cdetails\u003e\n\u003csummary\u003eExplanation and sample anti-pattern to \u003cstrong\u003eavoid\u003c/strong\u003e\u003c/summary\u003e\n\u003cp\u003e\nSee \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues/796\"\u003ethis discussion\u003c/a\u003e for an example sandbox (issue description) where \u003ccode\u003eonDeactivate\u003c/code\u003e was used to trigger the close of a dialog when the trap was deactivated (e.g. to react to the user clicking outside the trap with \u003ccode\u003efocusTrapOptions.clickOutsideDeactivates=true\u003c/code\u003e).\n\u003c/p\u003e\n\u003cp\u003e\nThe result can be that (depending on how you render the trap) in Strict Mode, the dialog never appears because it gets closed as soon as the trap renders, since the trap is deactivated as soon as it's unmounted, and so the \u003ccode\u003eonDeactivate\u003c/code\u003e handler is called, thus hiding the dialog...\n\u003c/p\u003e\n\u003cp\u003e\n\u003cstrong\u003eThis is intentional\u003c/strong\u003e: If the trap gets unmounted, it has no idea if it's being unmounted \u003cem\u003efor good\u003c/em\u003e or if it's going to be remounted \u003cem\u003eat some future point in time\u003c/em\u003e. It also has no idea of knowing \u003cem\u003ehow long\u003c/em\u003e it will be until it's remounted again. So it must be deactivated as though it's going away for good in order to prevent unintentional behavior and memory leaks (from orphaned document event listeners).\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Props\n\n### children\n\n\u003e ⚠️ The `\u003cFocusTrap\u003e` component requires a __single__ child, and this child must __forward refs__ onto the element which will ultimately be considered the trap's container. Since React does not provide for a way to forward refs to class-based components, this means the child must be a __functional__ component that uses the `React.forwardRef()` API.\n\u003e\n\u003e If you must use a __class__-based component as the trap's container, then you will need to get your own ref to it upon render, and use the `containerElements` prop (initially set to an empty array `[]`) in order to provide the ref's element to it once updated by React (hint: use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)).\n\n\u003e 💬 The child is ignored (but still rendered) if the `containerElements` prop is used to imperatively provide trap container elements.\n\nExample:\n\n```jsx\nimport { forwardRef, Component } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { FocusTrap } from 'focus-trap-react';\n\nconst container = document.getElementById('demo-function-child');\n\nconst TrapChild = forwardRef(function ({ onDeactivate }, ref) {\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cp\u003e\n        Here is a focus trap \u003ca href=\"#\"\u003ewith\u003c/a\u003e \u003ca href=\"#\"\u003esome\u003c/a\u003e{' '}\n        \u003ca href=\"#\"\u003efocusable\u003c/a\u003e parts.\n      \u003c/p\u003e\n      \u003cp\u003e\n        \u003cbutton\n          onClick={onDeactivate}\n          aria-describedby=\"class-child-heading\"\n        \u003e\n          deactivate trap\n        \u003c/button\u003e\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n});\n\nTrapChild.displayName = 'TrapChild';\nTrapChild.propTypes = {\n  onDeactivate: propTypes.func,\n};\n\nclass DemoFunctionChild extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      activeTrap: false,\n    };\n\n    this.mountTrap = this.mountTrap.bind(this);\n    this.unmountTrap = this.unmountTrap.bind(this);\n  }\n\n  mountTrap() {\n    this.setState({ activeTrap: true });\n  }\n\n  unmountTrap() {\n    this.setState({ activeTrap: false });\n  }\n\n  render() {\n    const trap = this.state.activeTrap \u0026\u0026 (\n      \u003cFocusTrap\n        focusTrapOptions={{\n          onDeactivate: this.unmountTrap,\n        }}\n      \u003e\n        \u003cTrapChild /\u003e\n      \u003c/FocusTrap\u003e\n    );\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003e\n          \u003cbutton onClick={this.mountTrap} aria-describedby=\"function-child-heading\"\u003e\n            activate trap\n          \u003c/button\u003e\n        \u003c/p\u003e\n        {trap}\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst root = createRoot(container);\nroot.render(\u003cDemoFunctionChild /\u003e);\n```\n\n### focusTrapOptions\n\nType: `Object`, optional\n\nPass any of the options available in focus-trap's [createOptions](https://github.com/focus-trap/focus-trap#createoptions).\n\n\u003e ❗️ This prop is __only read once__ on the first render. It's never looked at again. This is particularly important if you use state-dependent memoized __React Hooks__ (e.g. `const onActivate = useCallback(() =\u003e {...}, [something])`) for any of the focus-trap callbacks like `onActivate()`, `onDeactivate()`, `clickOutsideDeactivates()`, etc.\n\u003e\n\u003e If you need state-dependent callbacks, you have two options: __(1)__ Use a React component `class` (as in the examples in this README) with bound member handlers, or __(2)__ use a React Ref like `useRef({ myState: 1 })` in your callbacks and manually manage your state.\n\u003e\n\u003e See [#947](https://github.com/focus-trap/focus-trap-react/issues/947) for more details.\n\n\u003e ⚠️ See notes about __[testing in JSDom](#testing-in-jsdom)__ (e.g. using Jest) if that's what you currently use.\n\n### active\n\nType: `Boolean`, optional\n\nBy default, the `FocusTrap` activates when it mounts. So you activate and deactivate it via mounting and unmounting. If, however, you want to keep the `FocusTrap` mounted *while still toggling its activation state*, you can do that with this prop.\n\nSee `demo/demo-special-element.js`.\n\n### paused\n\nType: `Boolean`, optional\n\nIf you would like to pause or unpause the focus trap (see [`focus-trap`'s documentation](https://github.com/focus-trap/focus-trap#focustrappause)), toggle this prop.\n\n### containerElements\n\nType: `Array of HTMLElement`, optional\n\nIf specified, these elements will be used as the boundaries for the focus-trap, __instead of the child__.  These get passed as arguments to `focus-trap`'s `updateContainerElements()` method.\n\n\u003e 💬 Note that when you use `containerElements`, the need for a child is eliminated as the child is __always__ ignored (though still rendered) when the prop is specified, even if this prop is `[]` (an empty array).\n\u003e\n\u003e Also note that if the refs you're putting into the array, like `containerElements={[ref1.current, ref2.current]}`, aren't resolved yet, resulting in `[null, null]` for example, the trap will not get created. The array must contain at least one valid `HTMLElement` in order for the trap to get created/updated.\n\nIf `containerElements` is subsequently updated (i.e. after the trap has been created) to an empty array (or an array of falsy values like `[null, null]`), the trap will still be active, but the TAB key will do nothing because the trap will not contain any tabbable groups of nodes. At this point, the trap can either be deactivated manually or by unmounting, or an updated set of elements can be given to `containerElements` to resume use of the TAB key.\n\nUsing `containerElements` does require the use of React refs which, by nature, will require at least one state update in order to get the resolved elements into the prop, resulting in at least one additional render. In the normal case, this is likely more than acceptable, but if you really want to optimize things, then you could consider [using focus-trap directly](https://codesandbox.io/s/focus-trapreact-containerelements-demos-v5ydi) (see `Trap2.js`).\n\n## Help\n\n### Testing in JSDom\n\n\u003e ⚠️ JSDom is not officially supported. Your mileage may vary, and tests may break from one release to the next (even a patch or minor release).\n\u003e\n\u003e This topic is just here to help with what we know may affect your tests.\n\nIn general, a focus trap is best tested in a full browser environment such as Cypress, Playwright, or Nightwatch where a full DOM is available.\n\nSometimes, that's not entirely desirable, and depending on what you're testing, you may be able to get away with using JSDom (e.g. via Jest), but you'll have to configure your traps using the `focusTrapOptions.tabbableOptions.displayCheck: 'none'` option.\n\nSee [Testing focus-trap in JSDom](https://github.com/focus-trap/focus-trap#testing-in-jsdom) for more details.\n\n## Contributing\n\nSee [CONTRIBUTING](CONTRIBUTING.md).\n\n## Contributors\n\nIn alphabetical order:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/AlexKDawson\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16471362?v=4?s=100\" width=\"100px;\" alt=\"Alex Dawson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Dawson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=AlexKDawson\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Ayc0\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/22725671?v=4?s=100\" width=\"100px;\" alt=\"Benjamin Koltes\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBenjamin Koltes\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3AAyc0\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://ofcr.se/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/813865?v=4?s=100\" width=\"100px;\" alt=\"Benjamin Tan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBenjamin Tan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=bnjmnt4n\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://clintgoodman.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/5473697?v=4?s=100\" width=\"100px;\" alt=\"Clint Goodman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eClint Goodman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=cgood92\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=cgood92\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-cgood92\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=cgood92\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/DSil\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/6265045?v=4?s=100\" width=\"100px;\" alt=\"Daniel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-DSil\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=DSil\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Dan503\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/10610368?v=4?s=100\" width=\"100px;\" alt=\"Daniel Tonon\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDaniel Tonon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=Dan503\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=Dan503\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=Dan503\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://davidtheclark.com/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/628431?v=4?s=100\" width=\"100px;\" alt=\"David Clark\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Clark\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Adavidtheclark\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#infra-davidtheclark\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-davidtheclark\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/features/security\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/27347476?v=4?s=100\" width=\"100px;\" alt=\"Dependabot\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDependabot\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-dependabot\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/VercammenJens\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/19661051?v=4?s=100\" width=\"100px;\" alt=\"Jens Vercammen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJens Vercammen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3AVercammenJens\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jhnns\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/781746?v=4?s=100\" width=\"100px;\" alt=\"Johannes Ewald\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJohannes Ewald\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=jhnns\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://josuzuki.me\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/9583920?v=4?s=100\" width=\"100px;\" alt=\"Jonathan Suzuki\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonathan Suzuki\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3AJoSuzuki\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://reload.dk\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73966?v=4?s=100\" width=\"100px;\" alt=\"Kasper Garnæs\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKasper Garnæs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akasperg\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://kathleenmcmahon.dev/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/11621935?v=4?s=100\" width=\"100px;\" alt=\"Kathleen McMahon\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKathleen McMahon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-resource11\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/LoganDark\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4723091?v=4?s=100\" width=\"100px;\" alt=\"LoganDark\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLoganDark\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3ALoganDark\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://marais.io/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/599459?v=4?s=100\" width=\"100px;\" alt=\"Marais Rossouw\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarais Rossouw\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-maraisr\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Mathias-S\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/225531?v=4?s=100\" width=\"100px;\" alt=\"Mathias Stang\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMathias Stang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3AMathias-S\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/pulls?q=is%3Apr+reviewed-by%3AMathias-S\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/StackOverflowIsBetterThanAnyAI\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/140268904?v=4?s=100\" width=\"100px;\" alt=\"Michael\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#example-StackOverflowIsBetterThanAnyAI\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.moroshko.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/259753?v=4?s=100\" width=\"100px;\" alt=\"Misha Moroshko\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMisha Moroshko\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Amoroshko\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/liunate\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/38996291?v=4?s=100\" width=\"100px;\" alt=\"Nate Liu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNate Liu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=liunate\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.linkedin.com/in/rivajunior/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/11370172?v=4?s=100\" width=\"100px;\" alt=\"Rivaldo Junior\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRivaldo Junior\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-rivajunior\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://scottrippey.github.io/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/430608?v=4?s=100\" width=\"100px;\" alt=\"Scott Rippey\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eScott Rippey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://seanmcp.com/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/6360367?v=4?s=100\" width=\"100px;\" alt=\"Sean McPherson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSean McPherson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=SeanMcP\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://smoores.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5354254?v=4?s=100\" width=\"100px;\" alt=\"Shane Moore\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShane Moore\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#platform-SMores\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://recollectr.io\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6835891?v=4?s=100\" width=\"100px;\" alt=\"Slapbox\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSlapbox\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=Slapbox\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3ASlapbox\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://stefancameron.com/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2855350?v=4?s=100\" width=\"100px;\" alt=\"Stefan Cameron\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStefan Cameron\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Astefcameron\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#infra-stefcameron\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-stefcameron\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://tylerhawkins.info/201R/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/13806458?v=4?s=100\" width=\"100px;\" alt=\"Tyler Hawkins\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTyler Hawkins\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-thawkin3\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-thawkin3\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/wandroll\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4492317?v=4?s=100\" width=\"100px;\" alt=\"Wandrille Verlut\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWandrille Verlut\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=wandroll\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=wandroll\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/krikienoid\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/8528227?v=4?s=100\" width=\"100px;\" alt=\"krikienoid\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekrikienoid\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akrikienoid\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/robert-westenberger\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/44252092?v=4?s=100\" width=\"100px;\" alt=\"robert-westenberger\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erobert-westenberger\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/commits?author=robert-westenberger\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Arobert-westenberger\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/syntactic-salt\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9385662?v=4?s=100\" width=\"100px;\" alt=\"syntactic-salt\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esyntactic-salt\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/focus-trap/focus-trap-react/issues?q=author%3Asyntactic-salt\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocus-trap%2Ffocus-trap-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocus-trap%2Ffocus-trap-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocus-trap%2Ffocus-trap-react/lists"}