{"id":13727074,"url":"https://github.com/theKashey/react-focus-on","last_synced_at":"2025-05-07T22:30:49.079Z","repository":{"id":29584777,"uuid":"122138854","full_name":"theKashey/react-focus-on","owner":"theKashey","description":"🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for","archived":false,"fork":false,"pushed_at":"2025-03-22T08:25:45.000Z","size":3220,"stargazers_count":350,"open_issues_count":3,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T00:51:39.225Z","etag":null,"topics":["aria","focus","lock","scroll"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/theKashey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-02-20T00:34:54.000Z","updated_at":"2025-04-12T11:30:49.000Z","dependencies_parsed_at":"2024-02-14T16:24:52.106Z","dependency_job_id":"82849133-7803-4cf4-89dc-4640e57d1916","html_url":"https://github.com/theKashey/react-focus-on","commit_stats":{"total_commits":107,"total_committers":11,"mean_commits":9.727272727272727,"dds":"0.14018691588785048","last_synced_commit":"67da5b7d36251dcd7b6095aa87539b82980f3f95"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-focus-on","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-focus-on/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-focus-on/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-focus-on/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/react-focus-on/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965192,"owners_count":21832836,"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":["aria","focus","lock","scroll"],"created_at":"2024-08-03T01:03:38.416Z","updated_at":"2025-05-07T22:30:47.640Z","avatar_url":"https://github.com/theKashey.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e👁 React-Focus-On \u003c/h1\u003e\n  \u003cbr/\u003e\n   lock and loaded!\n  \u003cbr/\u003e\n  \n  \u003ca href=\"https://www.npmjs.com/package/react-focus-on\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-focus-on.svg?style=flat-square\" /\u003e\n  \u003c/a\u003e\n    \n  \u003ca href=\"https://travis-ci.org/theKashey/react-focus-on\"\u003e\n   \u003cimg src=\"https://img.shields.io/travis/theKashey/react-focus-on.svg?style=flat-square\" alt=\"Build status\"\u003e\n  \u003c/a\u003e \n\n  \u003ca href=\"https://www.npmjs.com/package/react-focus-on\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/dm/react-focus-on.svg\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e \n\n  \u003ca href=\"https://bundlephobia.com/result?p=react-focus-on\"\u003e\n   \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-focus-on.svg\" alt=\"bundle size\"\u003e\n  \u003c/a\u003e   \n  \u003cbr/\u003e\n\u003c/div\u003e\n\nThe final solution for WAI ARIA compatible Modal Dialogs or any full-screen tasks:\n- locks __focus__ inside using [react-focus-lock](https://github.com/theKashey/react-focus-lock)\n- disables page __scroll__ and user interactions using [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)\n- hides rest of a page from screen-readers using [aria-hidden](https://github.com/theKashey/aria-hidden)\n\nNow you could __focus on__ a single task.\n\n\u003e This is basically the `inert` \n\n_Minimal_ size - __no more than 2kb__, _maximal_ - no more that 6kb. See sidecar example for details.\n\n## Example\nCode sandbox example - https://codesandbox.io/s/p3vjp8mzw7\n```js\nimport {FocusOn} from 'react-focus-on';\n\n\u003cFocusOn\n onClickOutside={callback}\n onEscapeKey={callback}\n shards={[externalRef]}\n\u003e\n content you should be \"focused\" on\n\u003c/FocusOn\u003e\n```\n\n# API\n### FocusOn\n`FocusOn` - the focus on component\n - `enabled` - controls behaviour\n - `[shards]` - a list of Refs to be considered as a part of the Lock. A way to properly handle portals or scattered lock.\n--- \n - `[autoFocus=true]` - enables or disables `auto focus` management (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[returnFocus=true]` - enables or disables `return focus` on lock deactivation (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[whiteList=fn]` - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[crossFrame=true]` - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (see [react-focus-lock issue](https://github.com/theKashey/react-focus-lock/issues/104))\n---\n - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.\n - `[noIsolation]` - disables aria-hidden isolation\n - `[inert]` - enables pointer-events isolation (☠️ dangerous, use to disable \"parent scrollbars\", refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation)\n - `[allowPinchZoom]` - enables \"pinch-n-zoom\" behavior. By default it might be prevented, refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation\n - `[preventScrollOnFocus]` - prevents a [side effect of a programatic page scroll](https://github.com/theKashey/react-focus-on/issues/62) caused by focusing elements. Especially useful to address modal animations.\n---\n - `[onActivation]` - on activation callback\n - `[onDeactivation]` - on deactivation callback\n---\n - `[onClickOutside]` - on click outside of \"focus\" area. (actually on any event \"outside\")\n - `[onEscapeKey]` - on Esc key down (and not defaultPrevented)\n \n## Additional API\n### Exposed from React-Focus-Lock\n - `AutoFocusInside` - to mark autofocusable element\n - `MoveFocusInside` - to move focus inside a component on mount\n - `InFocusGuard` - to \"guard\" a shard node (place an invisible node before and after)\n \nSee [react-focus-lock](https://github.com/theKashey/react-focus-lock) documentation for details.\n \n### Exposed from React-Remove-Scroll\n - `classNames.fullWidth` - \"100%\" width (will not change on scrollbar removal)\n - `classNames.zeroRight` - \"0\" right (will not change on scrollbar removal)\n  \nSee [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) for details.\n\n\u003e PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.\n\n# Size\n- (🧩 full) 5.7kb after compression (excluding tslib).\n---\n- (👁 UI) __2kb__, visual elements only\n- (🚗 sidecar) 4kb, side effects  \n  \n### Import full\n```js\nimport {FocusOn} from 'react-focus-on';\n\n\u003cFocusOn\u003e\n {content}\n\u003c/FocusOn\u003e \n```  \n\n### Import UI only\n```js\nimport {FocusOn} from 'react-focus-on/UI';\nimport {sidecar} from \"use-sidecar\";\n\nconst FocusOnSidecar = sidecar(  \n  () =\u003e import(/* webpackPrefetch: true */ \"react-focus-on/sidecar\")\n);\n\n\u003cFocusOn\n    sideCar={FocusOnSidecar}\n\u003e\n {content}\n\u003c/FocusOn\u003e \n```\n\n# React versions\n- v1 and v2 might work with React 15/16\n- v3 require React 16.8+ (hooks)\n\n# Licence\n MIT\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Freact-focus-on","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FtheKashey%2Freact-focus-on","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Freact-focus-on/lists"}