1Consent × React

Cookie consent for your React application

Keep optional scripts, pixels and embeds behind explicit consent gates. Use reactive consent state in your components and keep the banner consistent with your app.

Public beta: @1consent/react. React 19+; use the explicit @beta release channel.

Start with React Set up with your AI

A service gate in your component

import { OneConsent } from "@1consent/react";

<OneConsent service="YOUR_CONFIGURED_SERVICE">
  <iframe
    title="Optional video"
    src="https://www.youtube.com/embed/VIDEO_ID"
  />
</OneConsent>

Illustrative markup: use a configured service name and add OneConsentProvider once above your gates. Read the guide for full setup and generated types.

Consent belongs in your component tree

Use a provider for your application and service gates where third-party markup appears. A website framework and your choice of coding assistant are independent.

01
Identify existing collection
Find trackers in the HTML entry, component tree and startup modules. React components cannot stop a tracker that already executed outside a gate.
02
Install and place your gates
Add @1consent/react@beta, generate service types, and put the provider before governed content. Gate plain HTML output; use once for global side effects, not visual embeds.
03
Exercise the SPA lifecycle
Test initial load, client-side navigation and remounts. Verify that visual embeds return when allowed and global tracking scripts do not initialize twice.

Let your coding assistant handle the setup

Use an MCP-capable coding assistant with access to your project. Connect the selected 1Consent app, then ask it to inspect your current React setup.

Prompt for your project

Integrate 1Consent in this React app using the connected MCP. Inspect the entry point, installed trackers and existing consent code. Read the React integration reference and selected app installation context. Use @1consent/react@beta, generate exact service types, add the provider once and gate governed markup. Preserve our theme and app behaviour. Test rejection, granular consent, withdrawal, reload and SPA remounts; report what could not be verified. Ask before account writes or publishing.

The assistant changes your project. The MCP supplies app context and guidance. A completed tool call does not prove that trackers respect consent; test the resulting website.

Connect your assistant to 1Consent

Use this production MCP server with OAuth in a compatible coding assistant. Sign in with your approved 1Consent account and select the intended app. Installation needs context and app-configuration reads; design and analytics access are separate choices.

Production MCP server URL

https://mcp.1consent.app/mcp

Open your Dashboard Connection and access guide Tools missing? Check your connection

Keep your app design, theme the consent experience

The provider and gates fit into your existing component tree. Configure the separate CMP theme in the Dashboard and match your app’s colors, typography and light/dark modes.

With separately approved access, the hosted MCP can edit customer theme drafts, assign them to frameworks and create a private real-runtime preview. Live publication requires your separate approval of the exact proposal in the Dashboard. Verify contrast, large text, preferences and actual delivered behavior in both color modes.

Check the result on your website

Check both browser behaviour and the places where your SPA mounts third-party content. The returning-visitor fast path requires valid consent and matching hosted configuration; it has no universal first-paint deadline.

Load with no saved choice and reject optional collection. Inspect requests, cookies and other vendor storage.
Allow one configured service and confirm its content activates while unrelated gates remain inert.
Withdraw through preferences and verify that governed content is restricted after the CMP reload.
Navigate away and back. Confirm once-only scripts are not duplicated and permitted visual embeds remount correctly.

Record what was tested and what remains unverified. A visible banner or a successful build alone does not establish tracker enforcement or legal compliance.

Before you integrate

Which React versions are supported?

The current public beta targets React 19+. Install @1consent/react@beta and follow the release-specific guide. Next.js applications can use the dedicated adapter.

Can I wrap any React component?

OneConsent gates plain HTML markup such as scripts, iframes and pixels. It does not gate arbitrary component execution. Place the component’s governed output inside a gate or use useConsent for client-rendered behaviour.

Do I need an AI assistant or MCP?

No. Follow the React setup guide to install the package, add the provider and generate types. AI assistance is an additional implementation path; consent enforcement runs in the website.

Choose your next step

Read the setup guide Lovable Next.js