{"id":19635492,"url":"https://github.com/henrygd/trap-focus-svelte","last_synced_at":"2025-04-28T08:30:36.223Z","repository":{"id":65697593,"uuid":"597554667","full_name":"henrygd/trap-focus-svelte","owner":"henrygd","description":"Tiny focus trap. Supports stacking, toggling, and dynamic content. Compatible with any framework. 360 bytes gzip.","archived":false,"fork":false,"pushed_at":"2024-06-07T19:13:02.000Z","size":128,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-10T11:08:21.848Z","etag":null,"topics":["a11y","accessibility","focus","focus-lock","focus-trap","svelte"],"latest_commit_sha":null,"homepage":"https://trap-focus-svelte.henrygd.me/","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/henrygd.png","metadata":{"files":{"readme":"readme.md","changelog":null,"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}},"created_at":"2023-02-04T22:21:07.000Z","updated_at":"2024-06-07T19:13:06.000Z","dependencies_parsed_at":"2024-06-07T20:33:08.501Z","dependency_job_id":"b1265eed-d7d0-4f50-b316-eb2f679b0163","html_url":"https://github.com/henrygd/trap-focus-svelte","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"7ac29fb479828a5caf189ef8e3aa96df796997c2"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrygd%2Ftrap-focus-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrygd%2Ftrap-focus-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrygd%2Ftrap-focus-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrygd%2Ftrap-focus-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henrygd","download_url":"https://codeload.github.com/henrygd/trap-focus-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224101761,"owners_count":17256022,"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":["a11y","accessibility","focus","focus-lock","focus-trap","svelte"],"created_at":"2024-11-11T12:25:33.962Z","updated_at":"2024-11-11T12:25:34.411Z","avatar_url":"https://github.com/henrygd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[npm-image]: https://flat.badgen.net/npm/v/trap-focus-svelte?color=blue\n[npm-url]: https://www.npmjs.com/package/trap-focus-svelte\n\n\u003c!-- [size-image]: https://flat.badgen.net/badgesize/gzip/henrygd/trap-focus-svelte/main/dist/trap-focus-svelte.svelte.js?color=green --\u003e\n\n[size-image]: https://flat.badgen.net/static/gzip%20size/358%20bytes/green\n[license-image]: https://flat.badgen.net/github/license/henrygd/trap-focus-svelte?color=purple\n[license-url]: /license\n\n# trap-focus-svelte\n\n[![npm][npm-image]][npm-url] ![File Size][size-image] [![MIT license][license-image]][license-url]\n\nSmall 0.4kB focus trap that supports stacking, toggling, and dynamic content. Designed for Svelte but compatible with plain JavaScript or any framework.\n\nDemo: https://trap-focus-svelte.henrygd.me\n\nSvelte example: https://stackblitz.com/edit/vitejs-vite-k328kh?file=src/App.svelte\n\nVanilla example with TypeScript: https://stackblitz.com/edit/vitejs-vite-sesxte?file=src/main.ts\n\n## Installation\n\n```bash\npnpm install trap-focus-svelte\n```\n\n## Usage with Svelte\n\nAdd directly to an element as an action.\n\nIf the element is removed, the trap and event listeners are destroyed automatically.\n\n```html\n\u003cscript\u003e\n\timport { trapFocus } from 'trap-focus-svelte'\n\u003c/script\u003e\n\n\u003cdiv use:trapFocus\u003e\n\t\u003cbutton\u003eInside trap\u003c/button\u003e\n\t\u003cbutton\u003eInside trap\u003c/button\u003e\n\u003c/div\u003e\n\u003cbutton\u003eOutside trap\u003c/button\u003e\n```\n\nYou can also toggle the trap on they fly:\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cscript\u003e\n\timport { trapFocus } from 'trap-focus-svelte'\n\n\tlet active = true\n\tconst toggleTrap = () =\u003e (active = !active)\n\u003c/script\u003e\n\n\u003cdiv use:trapFocus={active}\u003e\n\t\u003cbutton on:click={toggleTrap}\u003eToggle trap\u003c/button\u003e\n\t\u003cbutton\u003eInside trap\u003c/button\u003e\n\u003c/div\u003e\n\u003cbutton\u003eOutside trap\u003c/button\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n## Usage with vanilla JavaScript or other frameworks\n\nImport from `trap-focus-svelte/vanilla`\n\nFor an example of the demo site made without Svelte (with TypeScript / Vite) see [this StackBlitz](https://stackblitz.com/edit/vitejs-vite-sesxte?file=src/main.ts).\n\n```html\n\u003cdiv id=\"buttons\"\u003e\n\t\u003cbutton\u003eInside trap\u003c/button\u003e\n\t\u003cbutton\u003eInside trap\u003c/button\u003e\n\u003c/div\u003e\n\u003cbutton\u003eOutside trap\u003c/button\u003e\n```\n\n```js\nimport { trapFocus } from 'trap-focus-svelte/vanilla'\n\nconst buttons = document.getElementById('buttons')\n\n// create trap (pass false as a second argument to start disabled)\nconst buttonTrap = trapFocus(buttons)\n\n// toggle trap\nbuttonTrap.update(false)\n\n// destory trap\nbuttonTrap.destroy()\n```\n\n## Notes\n\nIf you have multiple traps active at the same time, the focus will be within the latest trap created or activated.\n\nWhen that trap is destroyed or deactivated, the focus will work backwards down the chain, eventually restoring focus to the [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement) at the time of the oldest trap's activation.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrygd%2Ftrap-focus-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenrygd%2Ftrap-focus-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrygd%2Ftrap-focus-svelte/lists"}