react-consent-management-banner

GDPR / ePrivacy cookie consent for React, wired into Google Consent Mode v2.

Live consent state

Updates as you accept, reject or save preferences. The same values go to Google Consent Mode v2.

consent given: not yet

Layout & position

Below 600px every layout collapses to a bottom sheet — corner cards are unusable at phone widths. Resize this page to see it.

Layout

Position

Colour scheme

Re-asking for consent

Bump version when your categories change, and expiryDays to refresh consent periodically. A stored choice failing either check is treated as absent.

tsx

<CookieConsent  GA_TRACKING_ID="G-XXXXXXXXXX"  config={{ version: 2, expiryDays: 365 }}/>

Usage

tsx

import { CookieConsent } from "react-consent-management-banner";import "react-consent-management-banner/style.css";
<CookieConsent  GA_TRACKING_ID="G-XXXXXXXXXX"  config={{    banner: { layout: "card", position: "bottom-right" },    onPreferencesChange: (prefs, given) => console.log(prefs, given),  }}/>