ReactCookie consent for React
A React package that blocks trackers until users consent, with typed hooks to gate your own code.
Most React cookie-consent libraries only store a choice in a cookie; they do not stop third-party scripts from loading. ConsentStack ships a React package that blocks trackers until the user consents and gives you hooks to gate your own scripts, with GDPR, CCPA, and 195+ regulations handled for you.
Does react-cookie-consent block trackers?
No, and it does not claim to. The package describes itself as "a small, simple and customizable cookie consent bar for use in React applications," and its documentation defines its main hook as a function "called after the user has clicked the accept button." That is the whole contract: it renders the bar and tells you when someone accepted.
What loads before that click is code you write. If your analytics or advertising tag sits in a component, a layout, or a tag manager, it fires on first paint whether or not the visitor has accepted, because nothing in the bar is standing between the tracker and the browser. The bar is doing its job. It was never scoped to be the thing that holds a tracker back.
This matters more than it used to. Regulators read compliance from what the browser actually requested, not from whether a banner appeared, so a site can show a perfect banner and still be loading third-party trackers on every first visit.
What a compliant React consent flow needs
Four things, and the banner is only the first. You need the choice presented before non-essential trackers load, the trackers actually held back until the visitor accepts, the decision recorded so you can evidence it later, and the right rules applied for the visitor's location without you writing region logic into your app.
You can assemble that yourself on top of a consent bar: wrap every third-party script in a consent check, keep a registry of which tag belongs to which category, store the decision somewhere you can query, and maintain the geographic rules as laws change. Teams do it. It is a maintained surface, not a one-time install, and it tends to drift the moment someone adds a tag without going through the wrapper.
@consentstack/react is the drop-in version of the same four things. Render <ConsentStack siteKey=".." /> once near the root, and blocking, logging, and regulation coverage come with it. Your own code gates on the useConsent hook rather than on a callback. If you want to see what your app does today before changing anything, the free cookie checker reports which trackers fire before consent.
Why ConsentStack on React
- A real consent layer, not just a cookie: third-party scripts are blocked until consent.
- Typed hooks (useConsent, useConsentValue) to conditionally load analytics and marketing code.
- Regulation coverage and geo-detection are handled for you, so you do not maintain rules in your app.
- Pixel-perfect brand matching, so the banner looks built into your React site, never bolted on.
Install in React
npm install @consentstack/reactimport { ConsentStack } from "@consentstack/react"
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<ConsentStack siteKey="YOUR_SITE_KEY" />
</body>
</html>
)
}Replace YOUR_SITE_KEY with the site key from your ConsentStack dashboard.
Render <ConsentStack /> once near the root of your app. Use the useConsent hook to gate analytics or marketing code on a category.
Common questions
ConsentStack's React package blocks third-party scripts until the user consents, rather than only storing a preference. It provides useConsent and useConsentValue hooks and covers GDPR, CCPA, and 195+ regulations without you writing region logic.
Install @consentstack/react, then render the ConsentStack component with your site key near the root of your app. The banner, blocking, and geo-detection are handled for you. Use the useConsent hook to gate your own scripts.
Yes. Read a category with useConsentValue("analytics") or hasConsent("analytics") from useConsent, and only load your analytics code when it returns true.
100+ happy customers
Ship consent on React. In minutes.
Scan your site free to see what is firing before consent, then turn on real blocking from one install.