Lewati ke konten utama

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

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

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.

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>
);
Messenger hanya muncul bila Anda meneruskan messengerHost dan proyek telah menyalakannya di konsol. Tanpa konfigurasi dan tanpa cache, tidak ada yang dirender, sebab peluncur bawaan hanyalah tebakan yang dilukis di halaman pelanggan.

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.

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

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.

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