{"_id":"@10up/react-focus-trap-hoc","_rev":"16-107ee408f98bce06293ab1c20584aadc","name":"@10up/react-focus-trap-hoc","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@10up/react-focus-trap-hoc","version":"1.0.0","keywords":["react","focus","trap","modal","accessibility","a11y"],"author":{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},"license":"MIT","_id":"@10up/react-focus-trap-hoc@1.0.0","maintainers":[{"name":"magnificode","email":"dominicmagnifico@gmail.com"}],"contributors":[{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},{"name":"Eugene Manuilov","email":"eugene.manuilov@gmail.com"},{"name":"10up"}],"homepage":"https://github.com/10up/react-focus-trap-hoc#readme","bugs":{"url":"https://github.com/10up/react-focus-trap-hoc/issues"},"dist":{"shasum":"ef1f647b49e011a0a5dbe1f62663db1af5b1c417","tarball":"https://registry.npmjs.org/@10up/react-focus-trap-hoc/-/react-focus-trap-hoc-1.0.0.tgz","integrity":"sha512-qatMxr2dV/JwXdxZmaCtRN84bIf+LEhYUfeBBCdY/peAiznx8Tu6pOYY/MIonRekIC9h4TgW8BbTNThfpawK1Q==","signatures":[{"sig":"MEUCIFmyd/ZQD7GYadji1nA5NkBOu6H9tdOKiZihFwFtKwCmAiEA6p1mzxxgh7qKBVqkzqYxfYZu1VbdlOy++4loo1hPyCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index","files":["*.md","dist","LICENSE","lib","src"],"gitHead":"f7244d6ce6af7a4613ade1dc34773a5718359ab0","scripts":{"build":"npm run build:commonjs & npm run build:umd & npm run build:umd:min","build:umd":"webpack dist/react-focus-trap-hoc.js","prepublish":"npm run build","build:umd:min":"NODE_ENV=production webpack dist/react-focus-trap-hoc.min.js","build:commonjs":"mkdir -p lib && babel ./src -d lib"},"_npmUser":{"name":"magnificode","email":"dominicmagnifico@gmail.com"},"repository":{"url":"git+ssh://git@github.com/10up/react-focus-trap-hoc.git","type":"git"},"_npmVersion":"5.3.0","description":"Higher order component used to trap keyboard focus within a wrapped component.","directories":{},"_nodeVersion":"8.2.1","devDependencies":{"react":"^15.6.1","eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.1","babel-core":"^6.25.0","prop-types":"^15.5.10","babel-eslint":"^7.2.3","babel-loader":"^6.4.1","eslint-loader":"^1.9.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.7.0","eslint-plugin-jsx-a11y":"^4.0.0"},"peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0","prop-types":"^15.0.0-0 || ^16.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/react-focus-trap-hoc-1.0.0.tgz_1513201368091_0.6380245939362794","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@10up/react-focus-trap-hoc","version":"1.0.1","keywords":["react","focus","trap","modal","accessibility","a11y"],"author":{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},"license":"MIT","_id":"@10up/react-focus-trap-hoc@1.0.1","maintainers":[{"name":"magnificode","email":"dominicmagnifico@gmail.com"},{"name":"eugene-manuilov","email":"eugene.manuilov@gmail.com"},{"name":"brandwaffle","email":"vhauri@gmail.com"},{"name":"cmmarslender","email":"chrismarslender@gmail.com"}],"contributors":[{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},{"name":"Eugene Manuilov","email":"eugene.manuilov@gmail.com"},{"name":"10up"}],"homepage":"https://github.com/10up/react-focus-trap-hoc#readme","bugs":{"url":"https://github.com/10up/react-focus-trap-hoc/issues"},"dist":{"shasum":"9ba3964539947ab6b5ee67436c85e863da8903cc","tarball":"https://registry.npmjs.org/@10up/react-focus-trap-hoc/-/react-focus-trap-hoc-1.0.1.tgz","integrity":"sha512-YGDW7LFK0fIlnlg1cEvkftJNgmHTRqNK/RC5HSxtdztqDZciaR26PSXRFB0ZiI5BH6UUvuunBdKSIuQR8Bv+eg==","signatures":[{"sig":"MEQCIETWRUh6p7EFQtppzYrTtguKDKZaeaGgN0Vcs9KsLxckAiBf872rv5faxRvMFxeOKmdeoZHzbwQw8b3XGrZOBr8IdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index","files":["*.md","dist","LICENSE","lib","src","index.js"],"gitHead":"d7f4daff08d232d9454e61f6df8e5426edd41b0b","scripts":{"build":"npm run build:commonjs & npm run build:umd & npm run build:umd:min","build:umd":"webpack dist/react-focus-trap-hoc.js","prepublish":"npm run build","build:umd:min":"NODE_ENV=production webpack dist/react-focus-trap-hoc.min.js","build:commonjs":"mkdir -p lib && babel ./src -d lib"},"_npmUser":{"name":"magnificode","email":"dominicmagnifico@gmail.com"},"repository":{"url":"git+ssh://git@github.com/10up/react-focus-trap-hoc.git","type":"git"},"_npmVersion":"5.6.0","description":"Higher order component used to trap keyboard focus within a wrapped component.","directories":{},"_nodeVersion":"8.2.1","devDependencies":{"react":"^15.6.1","eslint":"^3.19.0","webpack":"^2.7.0","babel-cli":"^6.24.1","babel-core":"^6.25.0","prop-types":"^15.5.10","babel-eslint":"^7.2.3","babel-loader":"^6.4.1","eslint-loader":"^1.9.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","eslint-plugin-react":"^6.10.3","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.7.0","eslint-plugin-jsx-a11y":"^4.0.0"},"peerDependencies":{"react":"^15.0.0-0 || ^16.0.0-0","prop-types":"^15.0.0-0 || ^16.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/react-focus-trap-hoc-1.0.1.tgz_1513263409955_0.09894009330309927","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-12-13T21:42:48.980Z","modified":"2026-08-21T19:38:59.355Z","1.0.0":"2017-12-13T21:42:48.980Z","1.0.1":"2017-12-14T14:56:50.931Z"},"bugs":{"url":"https://github.com/10up/react-focus-trap-hoc/issues"},"author":{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},"license":"MIT","homepage":"https://github.com/10up/react-focus-trap-hoc#readme","keywords":["react","focus","trap","modal","accessibility","a11y"],"repository":{"url":"git+ssh://git@github.com/10up/react-focus-trap-hoc.git","type":"git"},"description":"Higher order component used to trap keyboard focus within a wrapped component.","contributors":[{"name":"Dominic Magnifico","email":"dominicmagnifico@gmail.com"},{"name":"Eugene Manuilov","email":"eugene.manuilov@gmail.com"},{"name":"10up"}],"maintainers":[{"email":"mail@fabian-kaegy.de","name":"fabiankaegy"},{"email":"eugene.manuilov@gmail.com","name":"eugene-manuilov"},{"email":"christian.m.chung@gmail.com","name":"christianc1"},{"email":"nicholasio.oliveira@gmail.com","name":"nicholasio"},{"email":"joesnellpdx@gmail.com","name":"joesnellpdx"},{"email":"devin.leggett@gmail.com","name":"devinle"},{"email":"daryll.doyle@10up.com","name":"darylldoyle"},{"email":"jeffpaul@hotmail.com","name":"jeffpaul"}],"readme":"# react-focus-trap-hoc 1.0.1\n\nReact focus trap is a [higher order component](https://reactjs.org/docs/higher-order-components.html) intended to be used on components within a React application that may require focus to be driven to it, and then trapped within it until another action is taken by the user. A prime example of this would be a modal. From an accessibility standpoint, a user navigating a site with the keyboard may activate a modal, focus can be driven to the modal, and then remain inside the modal so the user can navigate through the content without focus being lost outside the modal.\n\n## Instalation\n\n**NPM**\n```\nnpm install @10up/react-focus-trap-hoc --save\n```\n\n**Yarn**\n```\nyarn add @10up/react-focus-trap-hoc --save\n```\n\n## Usage\n\nLet's use the following file as an example:\n\n```javascript\n  // Modal.jsgs\n  import React, { Component } from 'react';\n\n  class Modal extends Component {\n    constructor(props) {\n      super(props);\n\n      this.state = {\n        isOpen: false,\n      }\n    }\n\n    // Other methods here that handle the actual open and close function of the modal.\n\n    render() {\n      return(\n        <div id=\"modal\">\n          <p>Super fancy content with <a href=\"#\">focusable elements</a> within the modal!</p>\n          <button>Just a button here</button>\n        </div>\n      );\n    }\n  }\n\n  export default Modal;\n```\n\nTo ensure that focus is retained within your component, simply add the following:\n\n```diff\n  // Modal.js\n  import React, { Component } from 'react';\n+ import trapHOC from 'react-focus-trap-hoc';\n\n  class Modal extends Component {\n    constructor(props) {\n      super(props);\n\n      this.state = {\n        isOpen: false,\n      }\n    }\n\n+   componentDidMount() {\n+     if (this.state.searchOpen === true) {\n+       this.props.activateTrap();\n+      } else {\n+       this.props.deactivateTrap();\n+     }\n+   }\n\n    // Other methods here that handle the actual open and close function of the modal.\n\n    render() {\n      return(\n        <div id=\"modal\">\n          <p>Super fancy content with <a href=\"#\"></a>focusable elements</a> within the modal!</p>\n          <button>Just a button here</button>\n        </div>\n      );\n    }\n  }\n\n- export default Modal;\n+ export default trapHoc()(Modal);\n```\n\n## Documentation\n\n### trapHoc(options={ trapIsActive: false })(YourWrappedComponent);\nReact focus trap HOC allows you to pass options to the HOC itself. By default `trapIsActive` is set to false. This option dictates whether or not focus should be trapped initially. This would need to be set `true` for instance, when using react focus trap HOC with a stateless functional component.\n\nReact focus trap HOC also passes two functions to your wrapped component as props:\n\n### activateTrap()\n\n`activateTrap()` changes the state on the HOC, telling it that the trap is active.\n\n### deactivateTrap()\n\n`deactivateTrap()` changes the state on the HOC, telling it that the trap is inactive.\n\n`activateTrap()` and `deactivateTrap()` must be triggered on your component when state is changed on your wrapped component.\n\n## Contribute\n\nWhat to help or have a suggestion? Open a [new ticket](https://github.com/10up/react-focus-trap-hoc/issues/new) and we can discuss it or submit pull request. Thanks for your interest!\n\n## License\n\nMIT","readmeFilename":"README.md"}