You can add an event name to a Bento guide button instead of a URL, so that your app can take actions when a user clicks an event.
To respond to these events, you'll need to add a document listener in your application javascript.
document.addEventListener('bento-buttonClicked', function(e) {
if (e.detail.message === 'my-event-name') {
// take action here
}
});
If you're using react hooks, you'd want to use the normal react useCallback/useEffect paradigm:
const bentoClickHandler = React.useCallback((e) => {
if (e.detail.message === 'my-event-name') {
// take action here
}
}, [ /* any dependencies used in the function */ ]);
useEffect(() => {
document.addEventListener('bento-buttonClicked', bentoClickHandler);
return () => {
document.removeEventListener('bento-buttonClicked', bentoClickHandler);
}
}, [bentoClickHandler]);