Documentation
Search…
Custom event listeners
Attach any custom event listeners to specific nodes in your component, or to the entire component itself.

Custom event handlers

Use the eventHandlers prop to register any JavaScript functions that should fire based on any event you care about. Mason offers two methods - you can target the entire component or you can target specific elements within the component.

Targeting the entire component:

Provide an eventHandlers prop to your component as an object that contains all of the custom event handler functions you want to register on your component.
Register functions on the events you care about, with the syntax:
1
onEventName: (e) => // Any JavaScript function here
Copied!
For example:
1
import React from 'react';
2
import { Canvas } from '@mason-api/react-sdk';
3
4
class MyFeed extends React.Component {
5
render() {
6
return <Canvas
7
id="YOUR_COMPONENT_ID"
8
eventHandlers={
9
{
10
onClick: (e) => alert("You clicked something in your component"),
11
onMouseOver: (e) => alert("You moved your mouse over something in your component")
12
}
13
/>;
14
}
15
}
Copied!

Targeting specific elements within your component:

Provide an eventHandlers prop to your component as an object that contains all of the custom event handler functions you want to register on your component.
Register functions on the events and nodes you care about, with the syntax:
1
onLabelNameEventName: (e) => // Any JavaScript function here
Copied!
You define the LabelName in the builder. For example, if you had a button named "login button", the onClick event listener syntax would be onLoginButtonClick.
For example:
1
import React from 'react';
2
import { Canvas } from '@mason-api/react-sdk';
3
4
class MyFeed extends React.Component {
5
render() {
6
return <Canvas
7
id="YOUR_COMPONENT_ID"
8
eventHandlers={
9
{
10
onButtonOneClick: (e) => alert('Click triggered on Button One'),
11
onButtonThreeDoubleClick: (e) => alert('Double-clicked triggered on Button Three'),
12
onButtonFiveMouseDown: (e) => alert('Mousedown triggered on Button Five'),
13
onButtonSevenMouseUp: (e) => alert('Mouseup triggered on Button Seven'),
14
onButtonNineMouseOut: (e) => alert('Mouseout triggered on Button Nine'),
15
}
16
}
17
/>
18
}
19
}
Copied!

Supported event listeners

JavaScript event
Mason Syntax
click
onClick / onLabelNameClick
dblclick
onDoubleClick / onLabelNameDoubleClick
mousedown
onMouseDown / onLabelNameMouseDown
mouseup
onMouseUp / onLabelNameMouseUp
mouseout
onMouseOut / onLabelNameMouseOut
onMouseLeave / onLabelNameMouseLeave
onMouseEnter / onLabelNameMouseEnter
mouseover
onMouseOver / onLabelNameMouseOver
keydown
onKeyDown / onLabelNameKeyDown
keyup
onKeyUp / onLabelNameKeyUp
focus
onFocus / onLabelNameFocus
blur
onBlur / onLabelNameBlur

Live demo

See a working demo of all supported event listeners at https://showcase.trymason.com/events
Last modified 2yr ago