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 መጠቅለያ

የታተመበት

ጫን

አቅራቢው

መንጠቆዎቹ

ምንም በማይልክበት ጊዜ