React

Usage

In order to use this even system with React/Next.js.

Subscribing to events

To subscribe to events you need to use the EventSubscription component. This component will subscribe to events which are dispatched by the store. Adapters are used to map the events to the correct format for the event system you are using. For example, the EventSubscription component will use the centraGTMAdapter to map events from the @frend-digital/centra package to the format expected by Google Tag Manager.

"use client";
import { centraGTMAdapter } from "@frend-digital/events/gtm";
import { EventSubscription } from "@frend-digital/events/client";

export const Events = () => {
  const [adapters] = useState(() => [centraGTMAdapter()]);

  return <EventSubscription adapters={adapters} />;
};

Then render the Events component in your application. Prefer lazy loading this component as the adapters are quite large.

const Events = React.lazy(() => import("./Events"));

const Layout = ({ children }) => {
  return (
    <>
      {children}
      <Suspense>
        <Events />
      </Suspense>
    </>
  );
};