غلاف React

مزوّد وخطّافان فوق حزمة TypeScript. يثبّت عميلًا واحدًا لكل صفحة، فلا يضاعف وضع React الصارم أحداثك.

مكان النشر

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

التثبيت

Bash

bun add @prodantix/sdk @prodantix/react

Export	What it is
ProdantixProvider	Creates the client once per page and provides it
useProdantix	The client for the page, or null
useMessenger	A handle that opens and closes the widget, or null
prodantixConfig	The config when both key and host are present, else null
skipReason	Why this mount will send nothing, or null
resetProdantixForTest	Clears the once-per-page install, for tests

المزوّد

ركّب ProdantixProvider مرة واحدة قرب الجذر. ينشئ عميل الويب عند أول تركيب ثم يعيد استخدامه، لأن إنشاء عميل ثانٍ سيرقّع واجهة History مرتين ويضاعف كل حدث ملتقط تلقائيًا.

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 عميل الصفحة، أو قيمة فارغة على الخادم وقبل تنفيذ التأثير وخارج المزوّد. ويعطي useMessenger مقبضًا لفتح الأداة وإغلاقها، ويبقى فارغًا حتى تُقرأ إعدادات المشروع وتقول إنه مفعّل.

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

مكتبات العميل

محوّلات أطر العمل

غلاف React

مكان النشر

التثبيت

المزوّد

الخطّافان

حين لا يرسل شيئًا