Events

When using web components from the Riverty Design System, you can listen for custom events to follow user interactions. This page explains how to use custom events and summarizes which events there are.

Why custom events?

Behavior and styling of web components is encapsulated using shadow DOM. This maximizes robustness and portability, and also affects event handling. As explained by Shoelace (another great component library):

You can listen for standard events such as click, mouseover, etc. as you normally would. However, it’s important to note that many events emitted within a component’s shadow root will be retargeted to the host element. This may result in, for example, multiple click handlers executing even if the user clicks just once. Furthermore, event.target will point to the host element, making things even more confusing.

So, in short, Riverty web components emit custom events. The even name always start with r, such as rChange.

Listening to events

Riverty web components emit standard Custom Events. As a result, there are numerous examples and tutorials online which all apply. Here are some examples to get you started.

Vanilla JavaScript

const element = document.querySelector('r-checkbox');
element.addEventListener('rChange', (event) => {
  console.log('"rChange" event emitted, event.detail:', event.detail);
});

Angular

Within Angular environment HostListener decorator provides the way to handle custom events.

@HostListener('rChange', ['$event'])
changeHandler(event: CustomEvent) {
  console.log('"rChange" event emitted, event.detail:', event.detail)
}

React

Within React environment useEffect might be used:

React.useEffect(() => {
  window.addEventListener('rChange', handleChange);
  return () => {
    window.removeEventListener('rChange', handleChange);
  };
}, []);

Vue

One of the ways to listen to custom events is to use useEventListener.

import { useEventListener } from '@vueuse/core'

useEventListener(document, 'rChange', event => {
  console.log('"rChange" event emitted, event.detail:', event.detail)
})

Ionic team provides a way for event names to be converted from camel-case to lowercase for v-on: compatibility.

import { defineCustomElements } from '@riverty/web-components/loader';

defineCustomElements({
  ce: (eventname, opts) => new CustomEvent(eventname.toLowerCase(), opts)
});

Reference

Here is an overview of all custom events currently in place. The same information is always available by browsing the components docs.