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.
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!