Skip to main content

React wrapper

A provider and two hooks over the TypeScript SDK. It installs one client per page, so React strict mode does not double your events.

Where it is published

@prodantix/react on npm. It wraps @prodantix/sdk, so install both.

Install

Bash
bun add @prodantix/sdk @prodantix/react
ExportWhat it is
ProdantixProviderCreates the client once per page and provides it
useProdantixThe client for the page, or null
useMessengerA handle that opens and closes the widget, or null
prodantixConfigThe config when both key and host are present, else null
skipReasonWhy this mount will send nothing, or null
resetProdantixForTestClears the once-per-page install, for tests

The provider

Mount ProdantixProvider once, near the root. It creates the web client on the first mount and reuses it after that, because creating a second one would patch the History API twice and double every autocaptured event.

TypeScript
import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => (
  <ProdantixProvider
    options={{
      apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
      host: 'https://eu.api.prodantix.com',
      messengerHost: 'https://eu.edge.prodantix.com',
    }}
  >
    {children}
  </ProdantixProvider>
);
The messenger appears only when you pass messengerHost and the project has it switched on in the console. With no configuration and no cache, nothing renders, because a default launcher would be a guess painted on a customer page.

The hooks

useProdantix returns the client for the page, or null on the server, before the effect has run, and outside a provider. useMessenger returns a handle that opens and closes the widget, and stays null until the project configuration has been read and says enabled.

TypeScript
import { useMessenger, useProdantix } from '@prodantix/react';

export const HelpButton = () => {
  const prodantix = useProdantix();
  const messenger = useMessenger();

  // Both are null until the provider effect has run, so neither is assumed.
  return (
    <button
      onClick={() => {
        prodantix?.capture('help.opened');
        messenger?.open();
      }}
      type="button"
    >
      Get help
    </button>
  );
};

When it sends nothing

An app ships the same way with Prodantix switched off, so a missing key or host is not an error. prodantixConfig tells you whether both values are present, and skipReason says in one line why a mount will send nothing, rather than returning silently.

TypeScript
import { prodantixConfig, skipReason } from '@prodantix/react';

const env = {
  host: process.env.NEXT_PUBLIC_PRODANTIX_HOST,
  key: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
};

// null when either value is missing: the app runs with Prodantix switched off.
if (prodantixConfig(env) === null) {
  console.warn(skipReason(env, null));
}