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 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 बंद होने पर भी ऐप उसी तरह शिप होता है, इसलिए 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));
}

क्लाइंट लाइब्रेरी

फ़्रेमवर्क अडैप्टर

React रैपर

कहाँ प्रकाशित है

इंस्टॉल

प्रोवाइडर

हुक

जब यह कुछ नहीं भेजता