Event Module - React

import { useEventProvider } from '@equinor/fusion-framework-react-module-event';

/* fetch the `ÌEventModuleProvider` from the closes module provder */
const eventProvider = useEventProvider();

EventProvider

if needed, the resolving of which ÌEventModuleProvider the useEventProvider will provide can be altered by using
the EventProvider component

example app:

import { EventProvider, EventConsumer } = from '@equinor/fusion-framework-react-module-event';
import { useFramework } = from '@equinor/fusion-framework-react-app/framework';
const Content = () => {
  const framework = useFramework().modules.event;
  return (
    <EventProvider value={framework.modules.event}>
      <EventLogger />
      <InlineEventConsumer />
    <EventProvider>
  );
};

import { useEventHandler } = from '@equinor/fusion-framework-react-module-event';

const eventHandler = (event: FrameworkEventMap['some_event']) => {
  console.log(event.detail);
}; 

const EventLogger = () => useEventHandler('some_event', eventHandler);

import { EventConsumer } = from '@equinor/fusion-framework-react-module-event';

const InlineEventConsumer = () => (
  <EventConsumer>
    { 
      (provider) => provider.dispatch(
        'some_event'), 
        { detail: { foo: 'bar' } } 
    }
  </EventConsumer>
)

Hooks

useEventProvider

use IEventModuleProvider from current context see EventProvider

import { useEventProvider } from '@equinor/fusion-framework-react-module-event';

useEventModuleProvider

use IEventModuleProvider from closes module provider

import { useEventModuleProvider } from '@equinor/fusion-framework-react-module-event';

useEventHandler

import { useEventHandler } from '@equinor/fusion-framework-react-module-event';

useEventHandler(
  'onContextChange', 
  /** note that callback must be memorized */
  useCallback((e) => {
    console.log(e.detail);
  }, [deps]);
);

useEventStream

import { useEventStream, EventStream } from '@equinor/fusion-framework-react-module-event';

/* simple usage */
const { value: someEvent } = useObservableState(useEventStream('some_event'));

/* observe stream of events */
const someEvent$ = useEventStream(
  'some_event',
  /* note that callback must be memorized */
  useCallback(
    /* note react.useCallback cannot resolve source input */
    (event$: EventStream<'some_event'>) => event$.pipe(
      /* only some events */
      filter(e => e.detail.foo === dep.foo),
      /* mutate data */
      map(e => e.detail)
    ), 
    [dep]
  )
);
/* use state of stream */
const { value: foo } = useObservableState(someEvent$);