Introduction
Privacy and data protection are essential considerations for modern websites, so adding a cookie consent banner to your React app ensures compliance with data privacy regulations, like GDPR. In this tutorial, we’ll use the react-cookie-consent library to easily add a cookie consent banner to our application and customize it to give users control over cookie preferences.
Step 1: Set Up Your React Project
If you haven’t set up a React project yet, create one with the following commands:
npx create-react-app cookie-consent-demo
cd cookie-consent-demo
Step 2: Install react-cookie-consent
The react-cookie-consent library simplifies adding a cookie consent banner to your app. Install it using npm or yarn:
npm install react-cookie-consent
# or
yarn add react-cookie-consent
Step 3: Basic Implementation
Once you have the library installed, go to your main app file (usually App.js or App.tsx) and add the cookie consent component. Here’s a basic setup:
import React from "react";
import CookieConsent from "react-cookie-consent";
function App() {
return (
<div className="App">
<h1>Welcome to My Website</h1>
{/* Basic Cookie Consent */}
<CookieConsent
location="bottom"
buttonText="I understand"
cookieName="myWebsiteCookieConsent"
style={{ background: "#2B373B" }}
buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
expires={150}
>
This website uses cookies to enhance your browsing experience.{" "}
<a href="/privacy-policy" style={{ color: "#f5e042" }}>
Learn more
</a>
</CookieConsent>
</div>
);
}
export default App;
Step 4: Customizing the Consent Banner
To make the consent banner more engaging or add options like "Accept All" and "Decline," you can extend the component.
<CookieConsent
location="bottom"
enableDeclineButton
declineButtonText="Decline"
buttonText="Accept All"
cookieName="myWebsiteCookieConsent"
style={{ background: "#000" }}
buttonStyle={{ color: "#fff", fontSize: "14px" }}
declineButtonStyle={{
color: "#fff",
background: "#c0392b",
fontSize: "14px",
}}
expires={365}
onAccept={() => {
console.log("Cookies accepted");
}}
onDecline={() => {
console.log("Cookies declined");
}}
>
We use cookies to improve user experience. By clicking "Accept All," you consent to the use of cookies.
</CookieConsent>
Conclusion
Adding a cookie consent banner is crucial for user privacy and regulatory compliance, and react-cookie-consent makes it easy to implement. You can further customize the banner to align with your website's design and messaging and respond to user choices for enhanced control over cookie-based features.
Top comments (0)