Component Events

Listener props and event types of Vaadin React components.

Event Types

A React view handles events by passing a listener function as a prop, as with any React component. In the following example, the view shows a notification when the user clicks the button:

Open in a
new tab

Source code

click-view.tsximport { Button, Notification } from '@vaadin/react-components';

function Example() {
  function sayHello() {
    Notification.show('Hello');
  }

  return <Button onClick={sayHello}>Say hello</Button>;
}

The Vaadin React components accept a listener prop for each event that the underlying web component dispatches. The name of the prop is on followed by the event name in camel case. For example, the value-changed event has the prop onValueChanged, and the selected-items-changed event has the prop onSelectedItemsChanged. The TypeScript API reference of each component lists its events. Each page in the component documentation links to it at the top.

Event Types

Each component module exports a type for each event of the component. Use it to type the argument of the listener. Many events carry their data in event.detail. For example, event.detail.value is the new value in a value-changed event:

Open in a
new tab

Source code

value-changed-view.tsximport { useState } from 'react';
import { TextField, type TextFieldValueChangedEvent } from '@vaadin/react-components';

function Example() {
  const [name, setName] = useState('');

  function nameChanged(event: TextFieldValueChangedEvent) {
    setName(event.detail.value);
  }

  return (
    <>
      <TextField label="Your name" onValueChanged={nameChanged} />
      <div>Your name is: {name}</div>
    </>
  );
}

React passes the custom events of Vaadin components, such as value-changed, to the listener as they are. For standard browser events, such as click, React passes its own synthetic event instead. The browser event is then in event.nativeEvent.

To keep a form’s state in sync with its fields without handling their change events, bind the fields with the useForm hook. See Binding Data to Forms.

Docs

Docs

Component Events

Event Types