Aller au contenu principal

Adaptateurs de framework

Wrapper ReactWrapper Flutter

Wrapper React

Un fournisseur et deux hooks au-dessus du SDK TypeScript. Il installe un seul client par page, si bien que le mode strict de React ne double pas vos événements.

Où il est publié

@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

Le fournisseur

Montez ProdantixProvider une seule fois, près de la racine. Il crée le client web au premier montage puis le réutilise, car en créer un second corrigerait deux fois l'API History et doublerait chaque événement capté automatiquement.

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>
);
La messagerie n'apparaît que si vous passez messengerHost et que le projet l'a activée dans la console. Sans configuration ni cache, rien ne se rend, car un lanceur par défaut serait une supposition peinte sur la page d'un client.

Les hooks

useProdantix renvoie le client de la page, ou null sur le serveur, avant l'exécution de l'effet et hors d'un fournisseur. useMessenger renvoie une poignée qui ouvre et ferme le widget, et reste null tant que la configuration du projet n'a pas été lue et ne le déclare pas activé.

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

Quand il n'envoie rien

Une application se livre de la même façon avec Prodantix désactivé : une clé ou un hôte manquant n'est donc pas une erreur. prodantixConfig indique si les deux valeurs sont présentes, et skipReason explique en une ligne pourquoi un montage n'enverra rien, au lieu de revenir en silence.

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