cookie-consent
openconsent/cookie-consentFreeBlock
A full-featured, GDPR-compliant cookie consent solution with traceability support, script management, and granular category control.
Live preview
live · rendered by the registry
Rendered by openconsent on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://openconsent.dev/r/cookie-consent.jsonSource
1"use client";23import * as React from "react";4import { GoogleConsentMode } from "./google-consent-mode";5import {6 hasGoogleScripts as checkHasGoogleScripts,7 getLoadedScripts,8 loadConsentedScripts,9 registerScript as registerScriptInternal,10 unloadRevokedScripts,11 unregisterScript as unregisterScriptInternal,12} from "./script-manager";13import { retryFailedRecords, trackConsent } from "./tracker";14import type {15 CategoryConfig,16 ConsentCategories,17 ConsentCategory,18 ConsentChangeEvent,19 ConsentState,20 CookieConsentConfig,21 CookieConsentContextValue,22 GoogleConsentModeConfig,23 ScriptConfig,24} from "./types";25import {26 calculateExpirationDate,27 clearConsentState,28 getAllAcceptedCategories,29 getDefaultCategories,30 getVisitorId,31 isGoogleScript,32 loadConsentState,33 saveConsentState,34} from "./utils";3536const CookieConsentContext =37 React.createContext<CookieConsentContextValue | null>(null);3839export const defaultCategories: CategoryConfig[] = [40 {41 key: "necessary",42 title: "Necessary",43 description:44 "Essential cookies required for the website to function properly. These cannot be disabled.",45 required: true,46 },47 {48 key: "analytics",49 title: "Analytics",50 description:51 "Cookies that help us understand how visitors interact with our website.",52 },53 {54 key: "marketing",55 title: "Marketing",56 description: "Cookies used for advertising and tracking across websites.",57 },58 {59 key: "preferences",60 title: "Preferences",61 description: "Cookies that remember your settings and preferences.",62 },63];6465interface CookieConsentProviderProps {66 children: React.ReactNode;67 config: CookieConsentConfig;68}6970export function CookieConsentProvider({71 children,72 config,73}: CookieConsentProviderProps) {74 const [state, setState] = React.useState<ConsentState>(() => ({75 hasConsented: false,76 categories: getDefaultCategories(),77 lastUpdated: null,78 consentVersion: config.consentVersion,79 visitorId: "",80 }));81 const [isBannerVisible, setIsBannerVisible] = React.useState(false);82 const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);83 const [isInitialized, setIsInitialized] = React.useState(false);84 const [hasGoogleScripts, setHasGoogleScripts] = React.useState(false);8586 const previousCategoriesRef = React.useRef<ConsentCategories>(87 getDefaultCategories()88 );8990 // Auto-enable Google Consent Mode if Google scripts are detected91// … truncated
What it pulls in
Other registry items
