How to use Cookie Consent in a React App with react-cookie-consent

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.

Blog

How to use Cookie Consent in a React App with react-cookie-consent

Muchhal Sagar

Join Our Newsletter. No Spam, Only the good stuff.

Related