atomico-hooks-events

What problem does it solve?

Managing custom events and DOM listeners across web components is error-prone and verbose, leading to stale handlers, untyped payloads, and fragile cross-component communication. This Skill documents the useEvent and useListener hooks plus the event() prop helper to provide a consistent, typed approach for dispatching and listening to events within Atomico components while ensuring proper cleanup and predictable timing.

Core Features & Use Cases

• Dispatch Typed Events: useEvent creates a cached dispatcher that sends typed CustomEvent payloads from the host element, or calls matching event props when present.
• Ref-based Listeners with Auto-cleanup: useListener attaches handlers to referenced elements, updates to the latest handler, and removes listeners when refs change or the component unmounts.
• Prop-based Event Integration: event() declares props that act as both internal dispatchers and external callback listeners, enabling parent callbacks and JSX on-prefixed listeners.
• Use Cases: Build interactive UI elements that emit structured events to parents, implement pub/sub patterns across components, and attach stable handlers to internal or external DOM nodes.

Quick Start

Use useEvent to dispatch typed CustomEvents and use useListener to attach and auto-cleanup a ref-based handler inside an Atomico component.