Liigu põhisisu juurde

Raamistiku adapterid

Reacti ümbrisFlutteri ümbris

Reacti ümbris

Üks pakkuja ja kaks konksu TypeScripti SDK peal. See paigaldab ühe kliendi lehe kohta, nii et Reacti range režiim ei kahekordista sinu sündmusi.

Kus see on avaldatud

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

Paigaldus

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

Pakkuja

Paigalda ProdantixProvider üks kord, juure lähedale. See loob veebikliendi esimesel paigaldusel ja kasutab seda edaspidi uuesti, sest teise loomine parandaks History API-t kaks korda ja kahekordistaks iga automaatselt püütud sündmuse.

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>
);
Sõnumitooja ilmub ainult siis, kui annad messengerHost ja projektil on see konsoolis sisse lülitatud. Ilma seadistuse ja puhvrita ei renderdu midagi, sest vaikimisi käivitusnupp oleks kliendi lehele maalitud oletus.

Konksud

useProdantix tagastab lehe kliendi või null serveris, enne efekti käivitumist ja väljaspool pakkujat. useMessenger tagastab pideme vidina avamiseks ja sulgemiseks ning püsib null, kuni projekti seadistus on loetud ja ütleb, et see on sisse lülitatud.

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

Kui see midagi ei saada

Rakendus tarnitakse samamoodi ka väljalülitatud Prodantixiga, seega pole puuduv võti või host viga. prodantixConfig ütleb, kas mõlemad väärtused on olemas, ja skipReason selgitab ühe reaga, miks paigaldus midagi ei saada, selle asemel et vaikselt tagasi pöörduda.

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