React র্যাপার
TypeScript SDK-এর উপরে একটি প্রোভাইডার ও দুটি হুক। এটি প্রতি পেজে একটিমাত্র ক্লায়েন্ট ইনস্টল করে, তাই React-এর স্ট্রিক্ট মোড আপনার ইভেন্ট দ্বিগুণ করে না।
যেখানে প্রকাশিত
@prodantix/react on npm. It wraps @prodantix/sdk, so install both.
ইনস্টল
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 দুইবার প্যাচ হবে এবং প্রতিটি অটোক্যাপচার করা ইভেন্ট দ্বিগুণ হবে।
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>
);হুকগুলি
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 বন্ধ থাকলেও অ্যাপ একইভাবে শিপ করে, তাই কী বা হোস্ট না থাকা কোনো ত্রুটি নয়। 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));
}