Home > Web Front-end > JS Tutorial > body text

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

Mary-Kate Olsen
Release: 2024-11-02 17:18:02
Original
630 people have browsed it

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
Copy after login

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
Copy after login

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;
Copy after login

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>
Copy after login

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.

The above is the detailed content of How to use Cookie Consent in a React App with react-cookie-consent. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template