Reagujúca integrácia interkomu poháňaná háčikmi

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Reagujúca integrácia interkomu poháňaná háčikmi

reagovať-používať-interkom

Reagovať Interkom integrácia poháňaná háčikmi.

Vlastnosti

  • Háčiky
  • Napísané na stroji
  • Zdokumentované, samovysvetľujúce metódy
  • Drobná veľkosť bez akýchkoľvek externých knižníc
  • Zabezpečenie pre prostredia SSR

Inštalácia

yarn add react-use-intercom

Rýchly štart

import * as React from 'react'; import { IntercomProvider, useIntercom } from 'react-use-intercom'; const INTERCOM_APP_ID = 'your-intercom-app-id'; const App = () => ( ); // Anywhere in your app const HomePage = () => { const { boot, shutdown, hide, show, update } = useIntercom(); return Boot intercom! ☎️; };

Odkazy

POŽIAR

IntercomProvider

| _+_ | slúži na inicializáciu | _+_ | inštancia. Zaisťuje, že inicializácia sa vykoná iba raz. Ak sú niektorým poslucháčom vyhovené, | _+_ | zabezpečí, aby boli tieto pripojené.

Umiestnite | _+_ | čo najvyššie vo vašej aplikácii. Vďaka tomu budete môcť | _+_ | kdekoľvek.



Rekvizity
názov typ popis požadovaný predvolené
appId reťazec ID aplikácie vašej inštancie Intercom pravda
deti React.ReactNode Reagujte deti pravda
autoBoot booleovský označuje, či sa má interkom automaticky spustiť. Ak | _+_ | nie je potrebné volať | _+_ |, | _+_ | vám to zavolá falošný falošný
onHide () => neplatné spustí sa, keď sa Messenger skryje falošný
onShow () => neplatné spustí sa, keď sa zobrazí Messenger falošný
onUnreadCountChange (číslo) => neplatné sa spustí, keď sa zmení aktuálny počet neprečítaných správ falošný
malo by sa inicializovať booleovský označuje, či sa má interkom inicializovať. Môže byť použitý vo viacstupňovom prostredí falošný pravda
apiBase reťazec Ak potrebujete smerovať svoje požiadavky na Messenger cez iný koncový bod, ako je predvolený. Vo všeobecnosti to nie je potrebné.
Formát: | _+_ | (Pozri: https://github.com/devrnt/react-use-intercom/pull/96 ) falošný
Príklad
IntercomProvider

useIntercom

Používa sa na načítanie všetkých metód spojených s interkomom. Vychádzajú z oficiálnych údajov Interkomové dokumenty . Na zvýšenie pohodlia boli pridané niektoré ďalšie metódy.

Uistite sa | _+_ | je pri volaní | _+_ | omotaný okolo vášho komponentu.

Poznámka - Nemôžete použiť | _+_ | v tej istej zložke, kde | _+_ | je inicializovaný.

Metódy
názov typ popis
topánka (rekvizity ?: IntercomProps) => prázdne spustí inštanciu interkomu, nie je potrebná, ak | _+_ | v | _+_ | je | _+_ |
vypnúť () => neplatné vypne inštanciu interkomu
hardShutdown () => neplatné rovnaké funkcie ako | _+_ |, ale zaisťuje súbory cookie interkomu, | _+_ | a | _+_ | sú odstránené.
aktualizovať (rekvizity ?: IntercomProps) => prázdne aktualizuje inštanciu Intercom pomocou dodaných rekvizít. Ak chcete spustiť „ping“, zavolajte | _+_ | bez rekvizít
skryť sa () => neplatné skryje Messengera, zavolá | _+_ | ak sú dodávané do | _+_ |
šou () => neplatné ukazuje Messenger, zavolá | _+_ | ak sú dodávané do | _+_ |
showMessages () => neplatné zobrazuje Messenger so zoznamom správ
showNewMessages (obsah ?: reťazec) => neplatné ukazuje Messengera, ako keby bola práve vytvorená nová konverzácia. Ak | _+_ | je odovzdaný, vyplní skladateľa správ
getVisitorId () => reťazec získa ID návštevníka
startTour (tourId: number) => neplatné začína prehliadku podľa | _+_ |
trackEvent (udalosť: reťazec, metaData ?: objekt) => neplatné odosiela | _+_ | s voliteľným | _+_ |
Príklad
window.Intercom

IntercomProps

Všetky predvolené atribúty/rekvizity interkomu sú uložené v ťave (| _+_ | namiesto | _+_ |) v | _+_ |, pozri IntercomProps aby ste videli, akým atribútom môžete odovzdať | _+_ | alebo | _+_ |. Alebo skontrolujte interkom docs zobraziť všetky dostupné atribúty/rekvizity.

Poznámka - všetky uvedené atribúty Intercom tu sú obalené hadom, v | _+_ | sú tieto ťavy pripustené?

Vlastné atribúty

Napriek tomu chcete Interkomu odovzdať vlastné atribúty? Či | _+_ | alebo | _+_ | sa používa, môžete pridať svoje vlastné vlastnosti tak, že ich prejdete cez | _+_ | v | _+_ | alebo | _+_ | metóda.

Poznámka - klávesy | _+_ | objekt by mal byť chránený hadom (takto ich chce Intercom). Sú surovo odovzdané Interkomu.

IntercomProvider

Detské ihrisko

Príklad ihriska na predstavenie funkcií | _+_ |.

ako kúpiť útesovú mincu

useIntercom

https://devrnt.github.io/react-use-intercom/#/useIntercom

useIntercom (s prehliadkou Intercom)

https://devrnt.github.io/react-use-intercom/#/useIntercomTour

Strojopis

Zadajú sa všetky možné vopred definované možnosti, ktoré sa majú odovzdať inštancii Intercom. Takže kedykoľvek budete musieť prejsť IntercomProps , všetky možné vlastnosti budú k dispozícii ihneď po vybalení. Tieto rekvizity sú | _+_ | „Priateľský“, takže camelCase . Nie je potrebné odovzdávať rekvizity s had_cased kľúče.

Poznámka - Ak chcete odovzdať vlastné vlastnosti, mali by ste stále používať had_cased kľúče.

Riešenie problémov

  • Vidím, prosím, zabaľte svoj komponent s IntercomProvider. v konzole.

Uistite sa | _+_ | sa inicializuje pred volaním | _+_ |. Stačí len inicializovať | _+_ | raz. Odporúčame inicializovať | _+_ | čo najvyššie vo vašom strome aplikácií.

Uistite sa, že nevoláte | _+_ | v rovnakom komponente, kde ste inicializovali | _+_ |.

reagovať haková forma vs formik
  • Vidím | _+_ | v konzole.

Uistite sa, že zadávate správne vlastnosti do | _+_ |. Skontrolovať IntercomProvider aby ste videli všetky vlastnosti. Nezabudnite, že všetky vlastnosti v | _+_ | sú vypúšťané z ťavy, s výnimkou | _+_ | nehnuteľnosť v | _+_ | a | _+_ | metóda z | _+_ |.

Pokročilé

Aby ste znížili počet opätovných vykreslení vo vašej aplikácii React, navrhujem použiť IntercomProvider

TLDR: | _+_ | vráti zapamätanú verziu spätného volania, ktorá sa zmení iba vtedy, ak sa zmení jedna zo závislostí.

Toto je možné použiť na | _+_ | udalosti a | _+_ | metódy. Záleží na tom, koľkokrát sa vaša hlavná aplikácia znova vykreslí.

Príklad

useIntercom()

Podrobnosti na stiahnutie:

Autor: devrnt

Demo: https://devrnt.github.io/react-use-intercom/#/useIntercom

Zdrojový kód: https://github.com/devrnt/react-use-intercom

#react #reactjs #javascript

Pozri Tiež:

Nové Položky

Najpritibilnejšie

Redakcia Choice