> ## 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).

# Integrating Access in React/Next

Poool Access provides a dedicated integration for React/Next applications, allowing you to display a paywall while maintaining compatibility with modern frontend frameworks.
This integration is based on React components that wrap the Access SDK behavior and make it easier to implement inside a SPA.

A dedicated library is available to simplify the setup:

```
yarn add @poool/react-access
```

Official documentation: [https://www.poool.dev/fr/docs/access/react](https://www.poool.dev/fr/docs/access/react)
## How it works

The React integration is based on a context-driven architecture.
A parent component (`AccessContext`) initializes Access with your global configuration, while child components (paywall, restricted content, tracking) connect to it.
This allows you to:
* centralize configuration
* share variables and events
* react dynamically to application changes

## Integration steps

The integration is done in three main steps.
## 1. Initialize Access

The first step is to wrap your application with the `AccessContext` component.
This component passes your `appId` and the global configuration of the paywall (variables, styles, contexts, etc.).
```
import { AccessContext } from '@poool/react-access';

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

## 2. Define restricted content

The `RestrictedContent` component defines which part of your content should be protected or truncated.
```
import { RestrictedContent } from '@poool/react-access';
import { useRef } from 'react';

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

  return (
    <>
      <RestrictedContent ref={contentRef} mode="excerpt">
        <p>Premium content of your article...</p>
      </RestrictedContent>
    </>
  );
}
```

## 3. Display the paywall

The `Paywall` component is used to display the wall and link it to the restricted content.

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

<Paywall contentRef={contentRef} />
```

The `contentRef` binding is required to allow Access to lock or unlock the content correctly.

## Tracking with Pixel

Tracking is handled via the `Pixel` component, which allows you to send events with the content type.

```
<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>
```

This also relies on a global `AccessContext` with `withAudit={true}` enabled.
## Specific cases

In some cases, page navigation does not automatically reload Access.
It is therefore recommended to:
* reinitialize Access on route changes
This avoids keeping stale data or configuration between pages.

## Next.js specific considerations

If you encounter rendering or hydration issues when using the Next.js App Router, you should import the `<Paywall />` component using Next’s `dynamic` helper and explicitly disable server-side rendering (enabled by default for client components).

```
import dynamic from 'next/dynamic';

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

See [https://nextjs.org/docs/app/guides/lazy-loading](https://nextjs.org/docs/app/guides/lazy-loading) for more information.
## Example setup

A typical implementation includes:
* a global `AccessContext`
* `RestrictedContent` for protected content
* a `Paywall` linked to that content
* tracking via `Audit` or `Pixel`

Full example: [https://github.com/p3ol/react-access](https://github.com/p3ol/react-access)