@vantezzen/react-cookie-banner

> A simple, full-service cookie banner solution for React

react-cookie-banner handles displaying your cookie banner, saving and managing user consent and loading of external scripts based on user consent for you.

- Simple to use: No large configuration needed, just wrap your external scripts in the CookieService component
- Support for all library loaders: You can use other libraries like @nextjs/third-parties to load external scripts
- i18n support: Build-in support for multiple languages, plus fully customizable texts if you need it
- Handles consent automatically: All scripts wrapped in the CookieService component are only loaded if the user has given consent
- Customizable: Customize the look and feel of the cookie banner to fit your website
- Google Consent Mode: Automatically enable Google Consent Mode for Google Analytics and Ads
- Multi-tab support: User consent is saved in local storage and synced between tabs automatically

What does it look like?

!Cookie Banner

Live Demo:

``jsx
import {
CookieBanner,
ConsentMode,
CookieConsentProvider,
FloatingConsentInfo,
CookieService,
} from "@vantezzen/react-cookie-banner";

function App() {
return (
// Wrap your app in the CookieConsentProvider to allow accessing the consent state anywhere

{/ Display the cookie banner /}


{/* Optionally you can show a floating consent info in the bottom right to allow
changing consent later */}


{/ To set Google Consent Mode status, simply add the ConsentMode component /}


{/ Add a CookieService for each external script you want to load /}
id="google-analytics"
category="analytics"
name="Google Analytics"
consentMode // For Google Consent Mode
>
{/ Add any component or script that should only be loaded if the user has given consent /}