Intégrer Access en React/Next

Poool Access propose une intégration dédiée pour les applications React/Next, permettant d’afficher un paywall tout en conservant une logique compatible avec les frameworks modernes.

Cette intégration repose sur des composants React qui encapsulent le comportement du SDK Access et facilitent sa mise en place dans une application SPA.

Une librairie dédiée est disponible pour simplifier l’intégration :

yarn add @poool/react-access

Documentation officielle : https://www.poool.dev/fr/docs/access/react

Principe de fonctionnement

L’intégration React repose sur une logique de contextes.

Un composant parent (AccessContext) permet d’initialiser Access avec votre configuration globale, puis les différents composants enfants (paywall, contenu restreint, tracking) viennent s’y connecter.

Cela permet de :

• centraliser la configuration
• partager les variables et événements
• réagir dynamiquement aux changements côté application

L’intégration se fait en trois étapes principales:

Initialiser Access

La première étape consiste à encapsuler votre application avec le composant AccessContext.

Ce composant permet de transmettre votre appId ainsi que la configuration globale du paywall (variables, styles, contextes, etc.).

import { AccessContext } from '@poool/react-access';

function App() {
  return (
    <AccessContext
      appId="YOUR_APP_ID"
      config={{
        cookies_enabled: true,
      }}
    >
      <Page />
    </AccessContext>
  );
}

Définir le contenu restreint

Le composant RestrictedContent permet d’indiquer quelle partie de votre contenu doit être protégée et tronqué.

import { RestrictedContent } from '@poool/react-access';
import { useRef } from 'react';

function Article() {
  const contentRef = useRef();

  return (
    <>
      <RestrictedContent ref={contentRef} mode="excerpt">
        <p>Contenu premium de votre article...</p>
      </RestrictedContent>
    </>
  );
}

Afficher le paywall

Le composant Paywall permet d’afficher le wall et de le lier au contenu restreint.

import { Paywall } from '@poool/react-access';

<Paywall
  contentRef={contentRef}
/>

Le lien avec contentRef est obligatoire pour permettre à Access de verrouiller ou déverrouiller le contenu.

Gestion du tracking avec Pixel

Le tracking est géré via le composant Pixel, qui permet d’envoyer des événements avec le type de contenu.

   <AccessContext
      appId="test"
      config={{ cookies_enabled: true }}
      withAudit={true}
    >
      <RestrictedContent ref={contentRef}><div>test</div></RestrictedContent>

      <Paywall contentRef={contentRef} />
      <Pixel type="page-view" data={{ type: 'premium' }} />
    </AccessContext>

Cela repose aussi sur un AccessContext global avec withAudit={true}

Cas spécifique

Dans certain cas, le changement de page ne recharge pas automatiquement Access.

Il est donc recommandé de :

• réinitialiser Access lors des changements de route

Cela permet d’éviter que des données ou configurations soient conservées entre deux pages. (poool.dev)

Point d’attention : Next.js

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

import dynamic from 'next/dynamic';

const { Paywall } = dynamic(() => import('@poool/react-access'), { ssr: false });

Voir https://nextjs.org/docs/app/guides/lazy-loading pour plus d'informations.

Exemple

Une implémentation complète repose généralement sur :

• un AccessContext global
• un RestrictedContent pour le contenu
• un Paywall lié à ce contenu
• un tracking via Audit ou Pixel

Exemple complet : https://github.com/p3ol/react-access

Mis à jour le : 06/05/2026