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!
Last modified 1mo ago
Copy link
Edit on GitHub