Direflow
Get startedPropertiesEventsEventsStylingPluginsConfigurationAdditionalGuides & tipsContributingChangelog

Events

One thing is providing the Web Component with data through properties - but we also want the Web Component to be able to fire events that we can listen to.

In order to dispatch events that can be listened to from the Web Component, use the EventContext.
For example - if you want to dispatch a custom event 'my-event' that is triggered onClick, all you have to do is: 

import React, { useContext } from 'react';
import { EventContext } from 'direflow-component';


const App = () => {
  const dispatch = useContext(EventContext);


  const handleClick = () => {
    const event = new CustomEvent('my-event', { detail: 42 });
    dispatch(event);
  }


  return (
    <div onClick={handleClick}>Click to dispatch 'my-event'</div>
  );
};

Now you can add a listener when you consume the component:

<awesome-component></awesome-component>
const component = document.querySelector('awesome-component');


component.addEventListener('my-event', (e) => {
  // handle event
  console.log(e.detail) // 42
});


→ Styling