React रैपर

TypeScript एसडीके के ऊपर एक प्रोवाइडर और दो हुक। यह हर पेज पर एक ही क्लाइंट इंस्टॉल करता है, इसलिए React का स्ट्रिक्ट मोड आपके इवेंट दोगुने नहीं करता।

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

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

इंस्टॉल

bun add @prodantix/sdk @prodantix/react

प्रोवाइडर

ProdantixProvider को जड़ के पास एक ही बार माउंट करें। यह पहले माउंट पर वेब क्लाइंट बनाता है और उसके बाद उसी का पुन: उपयोग करता है, क्योंकि दूसरा बनाने से History API दो बार पैच होगा और हर ऑटोकैप्चर इवेंट दोगुना हो जाएगा।

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

साइन-इन व्यक्ति का नाम देना

person प्रोवाइडर को बताता है कि कौन साइन-इन है, एक कॉल नहीं बल्कि एक प्रॉप के रूप में, ताकि साइन-इन और साइन-आउट क्लाइंट तक वही मान बनकर पहुँचें जो वे हैं। इसकी तीन अवस्थाएँ हैं और हर एक अलग बात कहती है। undefined का अर्थ है यह सतह अभी नहीं जानती, क्योंकि उसका ऑथ अब भी हाइड्रेट हो रहा है, और प्रोवाइडर कुछ नहीं करता। कोई मान पहचान कराता है: प्रोवाइडर पहले मान पर identify बुलाता है और जब भी distinctId बदले फिर बुलाता है, SDK के अपने गुण यानी अवतार, ईमेल, नाम और फ़ोन लेकर। null का अर्थ है सतह ने सेशन देखा और किसी को नहीं पाया, और प्रोवाइडर क्लाइंट को तभी रीसेट करता है जब, और केवल जब, वह अब भी पहचाना हुआ हो; इससे अनाम आईडी घूम जाती है ताकि उस ब्राउज़र का अगला विज़िटर वही व्यक्ति न हो जो साइन-आउट हुआ। यही नियम साइन-आउट को वहाँ टिकाता है जहाँ साइन-आउट एक हार्ड नेविगेशन है और मान से null तक का संक्रमण कभी रेंडर ही नहीं होता। इसी कारण null कभी लोडिंग का अर्थ नहीं रख सकता: पेज रीलोड करता कोई साइन-इन व्यक्ति ऑथ हाइड्रेट होने से पहले ही रीसेट हो जाता। जो माउंट कोई सेशन देखता ही नहीं, कोई लैंडिंग पेज या डॉक्स पेज, वह undefined देता है, और अनुपस्थित प्रॉप पहले से ही undefined पढ़ा जाता है।

import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => {
  const { session, status } = useSession();

  // undefined while auth hydrates, null once it has resolved to nobody,
  // the subject once it has resolved to someone.
  const person = status === 'loading' ? undefined : session ? { distinctId: session.sub } : null;

  return (
    <ProdantixProvider
      options={{
        apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
        host: 'https://eu.api.prodantix.com',
        person,
      }}
    >
      {children}
    </ProdantixProvider>
  );
};

हुक

useProdantix पेज का क्लाइंट लौटाता है, या सर्वर पर, इफ़ेक्ट चलने से पहले, और प्रोवाइडर के बाहर null देता है। useMessenger विजेट खोलने और बंद करने का हैंडल देता है, और तब तक null रहता है जब तक प्रोजेक्ट का कॉन्फ़िगरेशन पढ़ा न जाए और वह चालू न बताए।

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 एक पंक्ति में कहता है कि यह माउंट कुछ क्यों नहीं भेजेगा, चुपचाप लौटने के बजाय।

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