> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](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](https://www.poool.dev/en/docs/access/javascript/legacy/installation))

## 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](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](https://github.com/p3ol/react-access)