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

bun add @prodantix/sdk @prodantix/react

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.

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

Kumtaja mtu aliyeingia

person humwambia mtoa huduma ni nani aliyeingia, kama sifa na si kama wito, hivyo kuingia na kutoka hufika kwa mteja kama thamani zilivyo. Ina hali tatu na kila moja husema kitu tofauti. undefined humaanisha uso huu haujui bado, kwa sababu uthibitisho wake bado unajazwa, na mtoa huduma hafanyi lolote. Thamani humtambua: mtoa huduma huita identify kwenye ya kwanza na tena kila distinctId inapobadilika, akibeba sifa za SDK yenyewe, yaani picha, barua pepe, jina na simu. null humaanisha uso uliuliza kipindi na haukumpata mtu, na mtoa huduma huweka upya mteja ikiwa, na tu ikiwa, bado ametambuliwa, jambo linalozungusha kitambulisho kisichojulikana ili mgeni ajaye kwenye kivinjari hicho asiwe yule aliyetoka. Kanuni hiyo ndiyo inayofanya kutoka kushike pale kutoka ni usogezaji mgumu na hakuna mpito kutoka thamani kwenda null unaochorwa kamwe. Ndiyo sababu pia null haipaswi kamwe kuwakilisha upakiaji: mtu aliyeingia akipakia ukurasa upya angewekwa upya kabla uthibitisho haujajazwa. Uwekaji usioulizia kipindi chochote, ukurasa wa kutua au ukurasa wa nyaraka, hupitisha undefined, na sifa isiyokuwepo tayari husomwa kama 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>
  );
};

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.

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.

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