React cookie consent: een banner die scripts echt blokkeert
Cookiebanner in React
React cookie consent: bouw een banner die scripts tegenhoudt | We.Inc
Bouw een cookiebanner in React: sla de keuze op, laad analytics pas na Accepteren en stuur Consent Mode-updates. Plus de props van het react-cookie-consent-pakket.
Bewaar de keuze van de bezoeker in React-state, sla die op in een first-party cookie of browseropslag, en render analytics- of advertentiescripts alleen als de bijbehorende categorie is toegestaan. Een kleine hook plus één bannercomponent is genoeg. Liever een pakket? react-cookie-consent geeft een kant-en-klare banner met props voor weigerknoppen, cookienaam en vervaldatum.
Twee manieren om toestemming toe te voegen aan een React-site
Zelf bouwen
Pakket react-cookie-consent
Categorieën (analytics, advertenties)
Ja, alle die u nodig hebt
Standaard één waarde: accepteren of weigeren
Weigerknop
Ja
Standaard uit; enableDeclineButton zet hem aan
Waar de keuze wordt opgeslagen
Cookie of opslag naar keuze
Standaard een cookie met de naam CookieConsent
Standaard vervaltermijn
Stelt u zelf in
365 dagen
Licentie
Uw eigen code
MIT
Het lastige van een cookiebanner is niet het vak op het scherm, maar zorgen dat niets wat niet essentieel is draait voordat de bezoeker ja zegt. In React is dat een state-probleem: één bron van waarheid voor de keuze, en componenten die die lezen voordat ze een scripttag toevoegen. De live demo hieronder doet precies dat, zodat u ziet dat de analytics-loader uit blijft tot u accepteert.
Een useConsent-hook leest bij het starten van de app een eventueel opgeslagen keuze en stelt die beschikbaar met setterfuncties.
De banner wordt alleen getoond zolang er geen keuze is opgeslagen, en biedt Alles accepteren, Alles weigeren en schakelaars per categorie die uit staan.
Scriptloaders controleren de hook voordat ze hun scripttag toevoegen, dus bij een weigering wordt de tag nooit toegevoegd.
Gebruikt u Google-tags, dan stuurt dezelfde setter een Consent Mode-update met de toegestane categorieën.
Een link Cookie-instellingen ergens in de app wist de opgeslagen keuze, zodat de banner opnieuw verschijnt.
Render de banner vanuit uw root-layout zodat hij op elke route verschijnt, ook bij directe bezoeken aan diepe pagina's.
Lees bij server rendering de opgeslagen keuze alleen in een effect op de client, zodat de server-render en de eerste client-render overeenkomen.
Geef de banner role=dialog of een gelabelde regio en maak elke knop bereikbaar met het toetsenbord.
Sla een versienummer op bij de keuze; voegt u een nieuwe categorie toe, verhoog het dan om opnieuw te vragen.
Verstop de weigeroptie nooit achter de instellingen; zet Alles weigeren naast Alles accepteren.
Veelgestelde vragen
Blokkeert react-cookie-consent scripts voor mij?
Nee. De README beschrijft een banner die het antwoord van de bezoeker in een cookie opslaat en onAccept of onDecline aanroept. Uw analytics laden of overslaan blijft uw taak, bijvoorbeeld door getCookieConsentValue te controleren voordat u het script toevoegt.
Hoe voeg ik een weigerknop toe aan react-cookie-consent?
Zet de prop enableDeclineButton; die staat standaard op false. De knoptekst is standaard I decline en is aan te passen met declineButtonText, en onDecline wordt uitgevoerd als erop wordt gedrukt.
Hoe laat ik bezoekers van gedachten veranderen?
Met uw eigen hook wist u de opgeslagen waarde en komt de banner terug. Met het pakket roept u resetCookieConsentValue aan, met dezelfde cookienaam die u de banner gaf als u die van de standaard hebt gewijzigd.
Moet ik toestemming opslaan in een cookie of in browseropslag?
Voor de browser werken beide. Een cookie kan ook door uw server worden gelezen, wat helpt als de server bepaalt welke tags worden uitgevoerd. Browseropslag houdt de waarde buiten elk verzoek. Beide zijn toegestaan om de keuze zelf te onthouden.
Waar horen Consent Mode-aanroepen in React?
Zet de gtag consent default in de HTML-head vóór elke Google-tag, buiten React, zodat die als eerste draait. Roep gtag('consent', 'update', ...) aan vanuit uw Accepteren-handler in React.
Waarom tegenhouden beter is dan verbergen
Een banner die zichzelf alleen verbergt na Weigeren, terwijl het analytics-fragment in index.html al is uitgevoerd, registreert het bezoek toch. De oplossing is het fragment verplaatsen naar een component dat pas na toestemming wordt gerenderd.
Voor tags die u niet kunt verplaatsen, zoals tags die een platform voor u invoegt, gebruikt u de toestemmingsinstelling van dat platform of Consent Mode, zodat de tag in beperkte modus draait tot de update binnenkomt.
Uw banner testen
Open de site in een privévenster, open de ontwikkelaarstools van uw browser en bekijk het Network-paneel: voordat u ergens op drukt, mogen er geen analytics- of advertentieverzoeken verschijnen. Accepteer daarna en controleer dat ze starten.
Herhaal dit met Alles weigeren en laad een tweede pagina om te controleren dat de weigering wordt onthouden.
Zelf bouwen: hook, banner en tegengehouden script
Drie kleine onderdelen. Ze gebruiken geen library, draaien in elke React 18- of 19-app en komen overeen met de demo hierboven.
useConsent-hook
Leest de opgeslagen keuze één keer op de client, en slaat elke wijziging op en zendt die uit.
ConsentBanner-component
Accepteren en Weigeren staan naast elkaar; categorievakjes staan standaard uit.
Een script pas na toestemming laden
De scripttag wordt alleen gemaakt als de categorie is toegestaan, dus bij een weigering bestaat hij nooit.
Het pakket react-cookie-consent gebruiken
Installeer het met npm install react-cookie-consent. Dit zijn de props en helpers die de README documenteert, met hun standaardwaarden, per oktober 2026.
Props en standaardwaarden van react-cookie-consent
Prop of helper
Standaard
Wat het doet
"bottom"
Waar de balk staat: top, bottom of none
buttonText
"I understand"
Tekst van de accepteerknop
enableDeclineButton
Toont een weigerknop
declineButtonText
"I decline"
Tekst van de weigerknop
cookieName
"CookieConsent"
Naam van de cookie die het antwoord opslaat
Dagen tot de cookie verloopt
onAccept / onDecline
Voert uw code uit als de bezoeker antwoordt
getCookieConsentValue(name)
Leest het opgeslagen antwoord
resetCookieConsentValue()
Verwijdert het opgeslagen antwoord zodat de balk opnieuw verschijnt
Banner met een weigerknop
Accepteren laadt analytics; Weigeren laadt niets optioneels. De controle bij de eerste keer laden dekt terugkerende bezoekers.
Live demo: een cookiebanner die scripts tegenhoudt
Voorbeeldwebsite
We gebruiken cookies voor analytics en advertenties, alleen als u akkoord gaat.
Alles accepteren
Alles weigeren
Kiezen
Keuzes opslaan
Analytics
Advertenties
Noodzakelijk (altijd aan)
Wat er geladen zou worden
{c}: script toegevoegd
{c}: geblokkeerd
Nog geen keuze, dus er wordt niets optioneels geladen.
Cookie-instellingen
Verzonden Consent Mode-update
Nog geen.
De demo onthoudt uw keuze alleen in deze browser. Er wordt niets verzonden.