Dispatch events from the webcomponent without referencing the context(this)


const dispatchEvent = useEvent(myEvent, eventInit);


  • dispatchEvent: callback, dispatches the event from the webcomponent and allows defining the detail by receiving a first parameter

  • myEvent: string, name of the event to dispatch.

  • eventInit: optional object, event configuration.


import { useEvent } from "atomico";

function component() {
  const dispatchEvent = useEvent("clickButton", {
    bubbles: true,
    composed: true,
  return (
      <button onclick={() => dispatchEvent()}>button</button>

Event customization

The second parameter of useEvent allows customizing the behavior of the even:

interface EventInit {
  // Allows the event to be dispatched upstream to the node's containers.
  bubbles?: boolean;
  // Allows the event to traverse the shadowDOM event capture.
  composed?: boolean;
  // Allows the event to be canceled.
  cancelable?: boolean;
  // Allows customizing the event builder, ideal for event instance-based communication.
  base?: Event | CustomEvent;
How to declare events for your component at the type level for TSX?

Last updated