useEvent

Search…
useEvent
Dispatch events from the webcomponent without referencing the context(this)
Syntax
1
const dispatchEvent = useEvent(myEvent, eventInit);
Copied!
Where:
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.
Examples
Basic
Detail
Typescript + detail
1
import { useEvent } from "atomico";
2
​
3
function component() {
4
  const dispatchEvent = useEvent("clickButton", {
5
    bubbles: true,
6
    composed: true,
7
  });
8
  return (
9
    <host>
10
      <button onclick={() => dispatchEvent()}>button</button>
11
    </host>
12
  );
13
}
Copied!
1
import { useEvent } from "atomico";
2
​
3
function component() {
4
  const dispatchEvent = useEvent("clickButton", {
5
    bubbles: true,
6
    composed: true,
7
  });
8
  return (
9
    <host>
10
      <button onclick={() => {
11
        const detail = "my-component"; // 👈
12
        dispatchEvent(detail);         // 👈
13
      }}>button</button>
14
    </host>
15
  )c
Copied!
1
import { useEvent } from "atomico";
2
​
3
function component() {
4
  //                             👇 type for detail
5
  const dispatchEvent = useEvent<{id:number}>("clickButton", {
6
    bubbles: true,
7
    composed: true,
8
  });
9
  return (
10
    <host>
11
      <button onclick={() => {
12
        //            👇 Detail
13
        dispatchEvent({id:100});
14
      }}>button</button>
15
    </host>
16
  );
17
}
Copied!
Event customization
The second parameter of useEvent allows customizing the behavior of the even:
1
interface EventInit {
2
  // Allows the event to be dispatched upstream to the node's containers.
3
  bubbles?: boolean;
4
  // Allows the event to traverse the shadowDOM event capture.
5
  composed?: boolean;
6
  // Allows the event to be canceled.
7
  cancelable?: boolean;
8
  // Allows customizing the event builder, ideal for event instance-based communication.
9
  base?: Event | CustomEvent;
10
}
Copied!
useProp
useRef
Last modified 1mo ago
Copy link
Edit on GitHub
Contents
Syntax
Examples
Event customization