#147
clickOutside
A box that counts how many clicks land outside it using the clickOutside action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "clickOutside" pattern (@codeatlasdev/ui demo #147, navigation/actions) in my app.
Call get_demo({ ids: ["#147"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Closing popovers, dropdowns and inline editors when the user clicks elsewhere on the page.
Keep these library parts, with the props and tokens the demo uses:
- clickOutside from "@codeatlasdev/ui/actions"
Behaviour to keep:
- `use:clickOutside={() => count++}` imported from `@codeatlasdev/ui/actions` on a `div` with `class="box"`
- `let count = $state(0)` is incremented by the callback
- Box text: Click inside this area, then click outside.
- Counter shown as `Outside clicks: {count}`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `use:clickOutside={() => count++}` imported from `@codeatlasdev/ui/actions` on a `div` with `class="box"`
- `let count = $state(0)` is incremented by the callback
- Box text: Click inside this area, then click outside.
- Counter shown as `Outside clicks: {count}`
Related
Loading source.