본문으로 건너뛰기

클라이언트 라이브러리

패키지TypeScript SDKDart SDKPython SDK

프레임워크 어댑터

React 래퍼Flutter 래퍼

React 래퍼

TypeScript SDK 위에 얹는 프로바이더 하나와 훅 두 개입니다. 페이지당 클라이언트를 하나만 설치하므로 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

프로바이더

ProdantixProvider는 루트 가까이에 한 번만 마운트하세요. 첫 마운트에서 웹 클라이언트를 만들고 이후에는 그것을 재사용합니다. 두 번째를 만들면 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를 넘기고 프로젝트가 콘솔에서 이를 켜 두었을 때만 나타납니다. 구성도 캐시도 없으면 아무것도 렌더링하지 않습니다. 기본 런처는 고객 페이지에 칠해 놓은 추측일 뿐이기 때문입니다.

훅

useProdantix는 해당 페이지의 클라이언트를 반환하며, 서버에서, 이펙트가 실행되기 전, 그리고 프로바이더 바깥에서는 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를 꺼 둔 상태로도 앱은 똑같이 배포되므로, 키나 호스트가 없는 것은 오류가 아닙니다. 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));
}