跳到主要内容

React 封装

在 TypeScript SDK 之上的一个 Provider 和两个 Hook。它每页只安装一个客户端，因此 React 严格模式不会让你的事件翻倍。

发布位置

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

安装

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

把 ProdantixProvider 挂载一次，放在靠近根的位置。它在首次挂载时创建 Web 客户端，之后一直复用，因为创建第二个会给 History API 打两次补丁，把每个自动采集的事件都变成两份。

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>
);
只有当你传入 messengerHost 且项目在控制台里开启了它时，消息助手才会出现。既没有配置也没有缓存时什么都不渲染，因为默认样式的启动按钮只是画在客户页面上的猜测。

两个 Hook

useProdantix 返回该页的客户端；在服务端、在 effect 运行之前，以及在 Provider 之外，它返回 null。useMessenger 返回打开和关闭挂件的句柄，在读取到项目配置并确认已启用之前一直是 null。

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

当它什么都不发送时

即使关闭 Prodantix，应用也照样发布，因此缺少 key 或 host 并不是错误。prodantixConfig 告诉你两个值是否齐备，skipReason 则用一行说明这次挂载为什么什么都不会发，而不是悄悄返回。

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