Zum Hauptinhalt springen

React-Wrapper

Ein Provider und zwei Hooks über dem TypeScript-SDK. Es installiert einen Client pro Seite, sodass der Strict Mode von React Ihre Ereignisse nicht verdoppelt.

Wo es veröffentlicht ist

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

Installation

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

Der Provider

Hängen Sie ProdantixProvider einmal ein, nahe der Wurzel. Er erzeugt den Web-Client beim ersten Einhängen und verwendet ihn danach weiter, denn ein zweiter würde die History-API zweimal patchen und jedes automatisch erfasste Ereignis verdoppeln.

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>
);
Der Messenger erscheint nur, wenn Sie messengerHost übergeben und das Projekt ihn in der Konsole aktiviert hat. Ohne Konfiguration und ohne Cache wird nichts gerendert, denn ein voreingestellter Starter wäre eine auf die Kundenseite gemalte Vermutung.

Die Hooks

useProdantix liefert den Client der Seite, oder null auf dem Server, vor dem Ausführen des Effekts und außerhalb eines Providers. useMessenger liefert einen Handle zum Öffnen und Schließen des Widgets und bleibt null, bis die Projektkonfiguration gelesen wurde und aktiviert meldet.

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>
  );
};

Wenn es nichts sendet

Eine App wird mit abgeschaltetem Prodantix genauso ausgeliefert, ein fehlender Schlüssel oder Host ist also kein Fehler. prodantixConfig sagt Ihnen, ob beide Werte vorliegen, und skipReason nennt in einer Zeile, warum ein Einhängen nichts senden wird, statt stillschweigend zurückzukehren.

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));
}