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

bun add @prodantix/sdk @prodantix/react

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.

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

Nombrar a la persona que ha iniciado sesión

person le dice al proveedor quién ha iniciado sesión, como propiedad y no como llamada, de modo que el inicio y el cierre de sesión llegan al cliente como los valores que son. Tiene tres estados y cada uno dice algo distinto. undefined significa que esta superficie aún no lo sabe, porque su autenticación sigue hidratándose, y el proveedor no hace nada. Un valor identifica: el proveedor llama a identify en el primero y de nuevo cada vez que cambia distinctId, llevando los rasgos propios del SDK, avatar, correo, nombre y teléfono. null significa que la superficie consultó una sesión y no encontró a nadie, y el proveedor reinicia el cliente si, y solo si, sigue identificado, lo que rota el id anónimo para que el siguiente visitante en ese navegador no sea la persona que cerró sesión. Esa regla es lo que hace que el cierre de sesión aguante donde cerrar sesión es una navegación dura y ninguna transición de valor a null llega a dibujarse. Es también por lo que null nunca debe significar cargando: una persona con sesión iniciada que recarga la página quedaría reiniciada antes de que la autenticación hidrate. Un montaje que no consulta ninguna sesión, una página de aterrizaje o una página de documentación, pasa undefined, y una propiedad ausente ya se lee como undefined.

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

export const Providers = ({ children }: { children: ReactNode }) => {
  const { session, status } = useSession();

  // undefined while auth hydrates, null once it has resolved to nobody,
  // the subject once it has resolved to someone.
  const person = status === 'loading' ? undefined : session ? { distinctId: session.sub } : null;

  return (
    <ProdantixProvider
      options={{
        apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
        host: 'https://eu.api.prodantix.com',
        person,
      }}
    >
      {children}
    </ProdantixProvider>
  );
};

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.

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.

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