Ruka hadi maudhui makuu

Kifuniko cha React

Mtoaji mmoja na ndoana mbili juu ya SDK ya TypeScript. Husakinisha mteja mmoja kwa kila ukurasa, hivyo hali kali ya React haiongezi maradufu matukio yako.

Ilipochapishwa

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

Sakinisha

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

Mtoaji

Weka ProdantixProvider mara moja, karibu na kiini. Huunda mteja wa wavuti wakati wa uwekaji wa kwanza na kisha huutumia tena, kwa sababu kuunda wa pili kungeweka kiraka mara mbili kwenye API ya History na kuongeza maradufu kila tukio lililonaswa kiotomatiki.

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>
);
Mjumbe huonekana tu unapopitisha messengerHost na mradi umeuwasha kwenye kiweko. Bila usanidi na bila akiba hakuna kinachochorwa, kwa sababu kitufe cha kawaida kingekuwa kisadikika kilichopakwa kwenye ukurasa wa mteja.

Ndoana

useProdantix hurudisha mteja wa ukurasa, au null kwenye seva, kabla athari haijaendeshwa, na nje ya mtoaji. useMessenger hurudisha kishikizo kinachofungua na kufunga kidirisha, na hubaki null hadi usanidi wa mradi usomwe na useme umewashwa.

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

Wakati hautumi chochote

Programu husafirishwa vilevile hata Prodantix ikiwa imezimwa, hivyo ufunguo au mwenyeji unaokosekana si hitilafu. prodantixConfig hukueleza kama thamani zote mbili zipo, na skipReason husema kwa mstari mmoja kwa nini uwekaji hautatuma chochote, badala ya kurudi kimyakimya.

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