trap-focus-svelte
v1.1.0
Published
Tiny focus trap. Supports stacking, toggling, and dynamic content. Compatible with any framework. 360 bytes gzip.
Downloads
1,233
Maintainers
Readme
trap-focus-svelte
Small 0.4kB focus trap that supports stacking, toggling, and dynamic content. Designed for Svelte but compatible with plain JavaScript or any framework.
Demo: https://trap-focus-svelte.henrygd.me
Svelte example: https://stackblitz.com/edit/vitejs-vite-k328kh?file=src/App.svelte
Vanilla example with TypeScript: https://stackblitz.com/edit/vitejs-vite-sesxte?file=src/main.ts
Installation
pnpm install trap-focus-svelte
Usage with Svelte
Add directly to an element as an action.
If the element is removed, the trap and event listeners are destroyed automatically.
<script>
import { trapFocus } from 'trap-focus-svelte'
</script>
<div use:trapFocus>
<button>Inside trap</button>
<button>Inside trap</button>
</div>
<button>Outside trap</button>
You can also toggle the trap on they fly:
<script>
import { trapFocus } from 'trap-focus-svelte'
let active = true
const toggleTrap = () => (active = !active)
</script>
<div use:trapFocus={active}>
<button on:click={toggleTrap}>Toggle trap</button>
<button>Inside trap</button>
</div>
<button>Outside trap</button>
Usage with vanilla JavaScript or other frameworks
Import from trap-focus-svelte/vanilla
For an example of the demo site made without Svelte (with TypeScript / Vite) see this StackBlitz.
<div id="buttons">
<button>Inside trap</button>
<button>Inside trap</button>
</div>
<button>Outside trap</button>
import { trapFocus } from 'trap-focus-svelte/vanilla'
const buttons = document.getElementById('buttons')
// create trap (pass false as a second argument to start disabled)
const buttonTrap = trapFocus(buttons)
// toggle trap
buttonTrap.update(false)
// destory trap
buttonTrap.destroy()
Notes
If you have multiple traps active at the same time, the focus will be within the latest trap created or activated.
When that trap is destroyed or deactivated, the focus will work backwards down the chain, eventually restoring focus to the document.activeElement
at the time of the oldest trap's activation.
License
MIT