Pembungkus React

Sebuah provider dan dua hook di atas SDK TypeScript. Ia memasang satu klien per halaman, sehingga mode ketat React tidak menggandakan event Anda.

Tempat diterbitkan

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

Instal

bun add @prodantix/sdk @prodantix/react

Provider

Pasang ProdantixProvider satu kali saja, dekat akar. Ia membuat klien web pada pemasangan pertama lalu memakainya kembali, sebab membuat yang kedua akan menambal History API dua kali dan menggandakan setiap event yang terekam otomatis.

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

Menyebut orang yang sedang masuk

person memberi tahu provider siapa yang sedang masuk, sebagai prop dan bukan panggilan, sehingga masuk dan keluar sampai ke klien sebagai nilai apa adanya. Ia punya tiga keadaan dan masing-masing berkata lain. undefined berarti permukaan ini belum tahu, karena autentikasinya masih terhidrasi, dan provider tidak berbuat apa-apa. Sebuah nilai berarti mengidentifikasi: provider memanggil identify pada nilai pertama dan memanggilnya lagi setiap kali distinctId berubah, membawa ciri milik SDK sendiri yaitu avatar, surel, nama, dan telepon. null berarti permukaan sudah menanyai sesi dan tidak menemukan siapa pun, dan provider mereset klien jika, dan hanya jika, klien masih teridentifikasi; itu memutar id anonim sehingga pengunjung berikutnya di peramban tersebut bukan orang yang baru keluar. Aturan itulah yang membuat keluar tetap berlaku di tempat keluar berupa navigasi keras dan tidak pernah ada transisi dari nilai ke null yang tergambar. Itu pula sebabnya null tidak boleh berarti sedang memuat: orang yang sudah masuk lalu memuat ulang halaman akan direset sebelum autentikasi terhidrasi. Pemasangan yang sama sekali tidak menanyai sesi, sebuah halaman pendaratan atau halaman dokumentasi, meneruskan undefined, dan prop yang absen memang sudah terbaca sebagai 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>
  );
};

Hook-hook

useProdantix mengembalikan klien untuk halaman itu, atau null di server, sebelum efek berjalan, dan di luar provider. useMessenger mengembalikan handle untuk membuka dan menutup widget, dan tetap null sampai konfigurasi proyek terbaca dan menyatakan aktif.

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

Ketika ia tidak mengirim apa pun

Sebuah aplikasi tetap dirilis sama saja dengan Prodantix dimatikan, jadi key atau host yang hilang bukanlah galat. prodantixConfig memberi tahu apakah kedua nilai tersedia, dan skipReason menyatakan dalam satu baris mengapa sebuah pemasangan tidak akan mengirim apa pun, alih-alih kembali diam-diam.

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