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

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

Updated on: 03/06/2026