cookie consent for React
A Vite or CRA app gets the runtime as the first tag in index.html, then @cookiecrumbs/react gives you ConsentGate, CookieDeclaration and ManageCookiesLink for the tree.
the rule
A React single-page app loads its analytics in main.tsx before any UI exists. A banner component added later shows a choice but cannot take back what already ran.
The rule is the same everywhere in the EU and the UK: nothing beyond what is strictly necessary may be stored on or read from a visitor’s device before they have agreed. That is Article 5(3) of the ePrivacy Directive, and the agreement has to meet the GDPR’s definition of consent: freely given, specific, informed and unambiguous, with a refusal that is as easy as the acceptance. The UK keeps the same rule in PECR, with narrow exemptions for low-risk statistics since 5 February 2026. California and the other US state laws work the other way round: no opt-in, but an opt-out link and support for the Global Privacy Control signal.
Three things follow for a website. Analytics, advertising and social scripts have to wait for a choice. The choice has to be recorded in a way you can show later, because Article 7(1) puts the burden of proof on you. And withdrawing has to be as easy as agreeing, which means a control that reopens the banner on every page. A banner that shows two buttons and loads Google Analytics anyway fails the first test, and that is the failure regulators have been fining, from the CNIL’s decisions against Google and SHEIN to the Dutch and Belgian authorities’ sweeps.
how it works
A React SPA has one HTML file, and that is where consent has to start. The runtime goes into index.html as the first script in the head, before the Vite or Webpack bundle. It installs its interceptor synchronously, before it even fetches your configuration, so anything the bundle tries to inject afterwards is caught.
Inside the tree you have two tools. ConsentGate renders its children only when a category is granted and shows your fallback otherwise, which is the right way to mount a chat widget, a video embed or an analytics provider. The runtime API on window, wrapped by @cookiecrumbs/react as a hook, tells any component the current state, the regime, the language and the consent id, and gives it open() to reopen the banner from a footer link.
Popular React patterns that trip people up: an analytics provider at the top of the tree that fires on mount, a router that sends page views on every navigation, and a useEffect that injects a pixel. Each of them either goes inside a gate or checks isGranted("analytics") before it does anything. The scan on your deployed site shows which of them still fire before consent, with the script that did it.
set-up
Five steps. The CLI does most of them, and every one is also a click in the dashboard.
Detects a plain React project, links the site, writes the config and prints the snippet.
npx cookiecrumbs login
npx cookiecrumbs initBefore your bundle, before everything. The runtime installs its interceptor synchronously.
<!-- index.html -->
<head>
<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
data-cc-site="pk_live_…"
data-cc-env="production"></script>
…
</head>A type="text/plain" tag with a category stays inert until granted. In the tree, ConsentGate renders its children only when the category is granted.
<script type="text/plain" data-cc-category="analytics"
src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
// in the app
import { ConsentGate } from '@cookiecrumbs/react';
<ConsentGate category="marketing">
<MetaPixel />
</ConsentGate>A footer link that reopens the banner is the withdrawal path Article 7(3) expects.
import { ManageCookiesLink } from '@cookiecrumbs/react';
<ManageCookiesLink>Manage cookies</ManageCookiesLink>The scan finds what the bundle really loads. Sort once per vendor, publish, done.
npx cookiecrumbs scan --wait
npx cookiecrumbs push --env productionReact apps that run Google Ads usually add gtag.js in index.html. Keep it there, below the runtime, and the Consent Mode defaults are already denied when it loads.
Google Consent Mode v2 is the signalling layer between the banner and Google’s tags. Before any tag runs, seven signals (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) are set to denied for visitors in the EEA, the UK and Switzerland. The moment someone chooses, the runtime updates them and Google’s tags adjust. Since 15 June 2026, Google uses ad_storage as the controlling signal for Ads data, so getting the default right matters more than it used to.
CookieCrumbs sets the defaults synchronously, ahead of any tag manager, updates them on every decision, and ships a Google Tag Manager template so the consent triggers exist without hand-written listeners. In advanced mode, Google’s cookieless pings keep modelled conversions working for the visitors who said no. What it does not do is pretend to be a Google-certified CMP: for AdSense, Ad Manager or AdMob in the EEA you still need one with IAB TCF, and CookieCrumbs is not that today.
watch out
Each one shows up in the first scan as a tracker that fired before consent.
before you ship
Eight lines. The dashboard ticks the last two from real data.
type="text/plain" with a category, or the host is in the block map from the scan.what you get
Two domains, 100 subpages scanned a month per domain, every regulation, the CLI, the SDKs and the MCP server.
Every page, in each consent state, in a real browser. Cookies, pixels, iframes and storage keys, with the page and script that set them. Re-scanned on a schedule.
The cookie declaration writes itself from the result.
Tags stay inert until their category is granted. Reject all is as visible as Accept all. Seven layouts, 25 languages, Consent Mode v2, and the right rule per region.
21 kB, one file, no third-party requests of its own.
Each choice is stored with a timestamp, the banner version and a hash of the texts shown, chained to the record before it. Exports are signed. Hosted in Frankfurt.
Article 7(1), on the free plan.
free check
The homepage HTML, matched against the tracker database. No account, nothing stored. The full scan in the dashboard does the same for every page, in a real browser.
questions
next step
Add the site, run npx cookiecrumbs init in your React repo, and the consent log starts recording in the EU.