@equinor/fusion-framework-react-module-event

React integration for the Fusion event module. Provides hooks and components for subscribing to and dispatching framework events from React components.

Import:

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

Exports

| Export | Type | Description | | ------------------------ | --------- | --------------------------------------------------------------- | | useEventHandler | Hook | Subscribe to a named framework event with a callback | | useEventStream | Hook | Get an RxJS observable stream for a named event | | useEventProvider | Hook | Access the event module provider directly | | useModulesEventProvider | Hook | Access the event provider from the module scope | | EventConsumer | Component | React context consumer for the event provider | | EventProvider | Component | React context provider for injecting an event provider |

All types from @equinor/fusion-framework-module-event are also re-exported.

useEventHandler

Subscribe to a framework event by name. The callback is registered on mount and cleaned up on unmount.

Signature:

function useEventHandler<TKey extends keyof FrameworkEventMap>(
  key: TKey,
  cb: FrameworkEventHandler<FrameworkEventMap[TKey]>,
): void;

Example:

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

const ContextChangeListener = () => {
  useEventHandler(
    'onCurrentContextChanged',
    useCallback((event) => {
      console.log('Context changed:', event.detail);
    }, [])
  );

  return <div>Listening for context changes…</div>;
};

useEventStream

Returns an RxJS observable stream filtered to a specific event. Useful when you need to compose event streams with RxJS operators.

Signature:

function useEventStream<
  TKey extends keyof FrameworkEventMap,
  TData = FrameworkEventMap[TKey],
>(key: TKey, operator?: OperatorFunction<FrameworkEventMap[TKey], TData>): Observable<TData>;

[!NOTE] The operator parameter must be memoised to avoid re-creating the stream on every render.

Example:

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

const EventCounter = () => {
  const events$ = useEventStream('onCurrentContextChanged');
  const { value: lastEvent } = useObservableState(events$);

  return <p>Last event: {JSON.stringify(lastEvent?.detail)}</p>;
};

Related

• @equinor/fusion-framework-module-event — the underlying event module with full API documentation