Pular para o conteúdo principal

Adaptadores de framework

Wrapper ReactWrapper Flutter

Wrapper React

Um provider e dois hooks sobre o SDK TypeScript. Ele instala um cliente por página, de modo que o modo estrito do React não duplica seus eventos.

Onde está publicado

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

Instalação

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

O provider

Monte o ProdantixProvider uma vez, perto da raiz. Ele cria o cliente web na primeira montagem e o reutiliza depois, porque criar um segundo aplicaria patch duas vezes na API History e duplicaria todo evento capturado automaticamente.

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>
);
O mensageiro só aparece quando você passa messengerHost e o projeto o tem ligado no console. Sem configuração e sem cache, nada é renderizado, porque um lançador padrão seria um palpite pintado na página de um cliente.

Os hooks

useProdantix devolve o cliente da página, ou null no servidor, antes de o efeito rodar e fora de um provider. useMessenger devolve um handle que abre e fecha o widget, e permanece null até a configuração do projeto ser lida e indicar que está ligado.

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

Quando ele não envia nada

Um aplicativo é publicado do mesmo jeito com o Prodantix desligado, então uma chave ou host ausente não é um erro. prodantixConfig informa se os dois valores estão presentes, e skipReason diz em uma linha por que uma montagem não enviará nada, em vez de retornar em silêncio.

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