Saltar al contenido principal

Adaptadores de framework

Wrapper de ReactWrapper de Flutter

Wrapper de React

Un proveedor y dos hooks sobre el SDK de TypeScript. Instala un cliente por página, así que el modo estricto de React no duplica tus eventos.

Dónde se publica

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

Instalación

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

El proveedor

Monta ProdantixProvider una sola vez, cerca de la raíz. Crea el cliente web en el primer montaje y lo reutiliza después, porque crear un segundo parchearía la API History dos veces y duplicaría cada evento autocapturado.

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>
);
El mensajero solo aparece cuando pasas messengerHost y el proyecto lo tiene activado en la consola. Sin configuración y sin caché no se renderiza nada, porque un lanzador por defecto sería una suposición pintada en la página de un cliente.

Los hooks

useProdantix devuelve el cliente de la página, o null en el servidor, antes de que el efecto se ejecute y fuera de un proveedor. useMessenger devuelve un manejador que abre y cierra el widget, y sigue en null hasta que se haya leído la configuración del proyecto y esta diga que está activado.

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

Cuando no envía nada

Una aplicación se publica igual con Prodantix apagado, así que una clave o un host ausente no es un error. prodantixConfig te dice si están los dos valores, y skipReason explica en una línea por qué un montaje no enviará nada, en lugar de volver en silencio.

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