menu
close
CI

#Installer Access sur React

Le moyen le plus simple d'ajouter Poool Access à votre application React ✨

ℹ️ Vous consultez la documentation de la v2 de React Access. Si vous recherchez la v1, veuillez consulter la documentation v1.

#Installation

#Utilisation

#Utilisation avec AuditContext (manuellement)

#Utilisation avec Next

⚠️ Si vous rencontrez des problèmes de rendering (ou d'hydratation) et que vous utilisez l'app router de next, veuillez importer le composant <Paywall /> en utilisant le helper dynamic de next et désactiver explicitement le rendu côté serveur (activé par défaut même pour les composants client):
Voir https://nextjs.org/docs/app/guides/lazy-loading pour plus d'informations.

#Documentation

#AccessContext

<AccessContext />

#Props

  • appId {String} Votre Poool App ID
  • config {Object} (optionnel) Configuration paywall par défaut (voir la documentation configuration).
  • styles {Object} (optionnel) Styles du paywall par défaut (voir la documentation styles).
  • texts {Object} (optionnel) Textes du paywall par défaut (voir la documentation textes).
  • events {Object} (optionnel) Listener des événements du paywall (voir la documentation événements).
  • variables {Object} (optionnel) Variables du paywall (voir la documentation variables).
  • scriptUrl {String} (optionnel, par défaut : 'https://assets.poool.fr/access.min.js') URL du SDK Poool Access par défaut
  • withAudit {Boolean} (optionnel, par défaut : false) Inclure ou non AuditContext dans AccessContext

#AuditContext

<AuditContext />

#Props

  • appId {String} Votre Poool App ID
  • config {Object} (optionnel) Configuration audit par défaut (voir la documentation configuration).
  • events {Object} (optionnel) Écouteurs d'événements audit (voir la documentation événements).
  • scriptUrl {String} (optionnel, par défaut : 'https://assets.poool.fr/audit.min.js') URL du SDK Poool Audit par défaut

#RestrictedContent

<RestrictedContent />

#Props

  • mode {String: 'excerpt' | 'hide' | 'custom'} (optionnel) Façon de masquer le contenu voir Configuration Access pour plus d'informations.
  • percent {Number} (optionnel) Pourcentage de contenu à masquer.

#Paywall

<Paywall />

#Props

  • contentRef {React.Ref} Référence au composant RestrictedContent associé à ce Paywall
  • id {String} (optionnel, par défaut : id aléatoire) ID du composant wrapper personnalisé
  • pageType {String} (optionnel, par défaut : 'premium') Type de page actuel (types supportés : page, premium, free)
  • config {Object} (optionnel) Configuration du paywall (voir la documentation configuration).
  • styles {Object} (optionnel) Styles du paywall (voir la documentation styles).
  • texts {Object} (optionnel) Textes du paywall (voir la documentation textes).
  • variables {Object} (optionnel) Variables du paywall (voir la documentation variables).
  • events {Object} (optionnel) Listener d'événements du paywall (voir la documentation événements)

#Pixel

<Pixel />

#Props

  • type {String} Type d'événement (types supportés : page-view)
  • data {Object} (optionnel mais obligatoire quand type est page-view) Données associées à l'événement (voir la documentation audit)
  • config {Object} (optionnel) Configuration du pixel (voir la documentation configuration).
  • options {Object} (optionnel) Options à passer à l'événement (voir la documentation audit)
  • onDone {Function} (optionnel) Callback à exécuter quand l'événement est terminé
  • reuse {Boolean} (optionnel, par défaut : false) Réutiliser ou non le même événement

#useAccess()

Peut être utilisé pour récupérer certaines propriétés du contexte access actuel, ainsi que le SDK Access lui-même.

#Returns

  • lib {Function} Le SDK Access complet
  • appId {String} App ID actuel
  • config {Object} Configuration du contexte access actuel
  • texts {Object} Textes du contexte actuel
  • styles {Object} Styles du contexte actuel
  • variables {Object} Variables du contexte actuel
  • events {Object} Listener d'événements du contexte access actuel
  • scriptUrl {Object} URL du SDK Access
  • createFactory {Function} Fonction pour déclencher une nouvelle initialisation access, retourne l'instance access créée, avec les options passées
  • destroyFactory {Function} Fonction pour supprimer une factory

#Exemple

#useAudit()

Peut être utilisé pour récupérer certaines propriétés du contexte audit actuel, ainsi que le SDK Audit lui-même.

#Returns

  • lib {Function} Le SDK Audit complet
  • appId {String} App ID actuel
  • config {Object} Configuration du contexte audit actuel
  • events {Object} Listeners d'événements du contexte audit actuel
  • scriptUrl {Function} URL du SDK Audit

#Exemple

#Migration v2

  • <PaywallContext /> a été remplacé par <AccessContext /> (utilisé pour afficher le paywall) et <AuditContext /> (utilisé pour tracker des événements particuliers)
  • usePoool a été remplacé par useAccess et useAudit, nécessitant tous deux respectivement que les contextes ci-dessus soient un composant parent
  • <Paywall /> nécessite maintenant un prop contentRef pour pouvoir verrouiller/déverrouiller le contenu, et la ref doit être récupérée depuis <RestrictedContent />
  • <Pixel /> a été ajouté pour éviter le tracking manuel d'événements en utilisant l'ancienne fonction poool()
Exemple basique en v1:
À transformer en v2 :