In this detailed guide, we’ll walk through the creation of a Cookies Consent component in React. The component will allow users to accept or decline cookies, adhering to privacy regulations and providing a seamless user experience. We’ll break down the JSX structure and CSS styling, explaining each part in detail.
JSX Structure:
Let’s start by examining the JSX structure of our Cookies Consent component:
import React, { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
import "./cookies.css";
const CookiesConsent = () => {
const [cookies, setCookie] = useCookies(["cookieBy"]);
const [showConsent, setShowConsent] = useState(false);
useEffect(() => {
if (cookies.cookieBy === "viralCoder") {
setShowConsent(false);
} else {
setShowConsent(true);
}
}, [cookies]);
const acceptConsent = () => {
setCookie("cookieBy", "viralCoder",
{ maxAge: 60 * 60 * 24 * 30 });
// Set cookies for 30 days
setShowConsent(true);
};
const declineConsent = () => {
setShowConsent(false);
};
return (
<>
{showConsent && (
<div className="wrapper">
<header>
<i className="bx bx-cookie"></i>
<h2>Cookies Consent</h2>
</header>
<div className="data">
<p>
This website use cookies to help you have a superior and more
relevant browsing experience on the website.{" "}
{/* <a href="#">Read more...</a> */}
</p>
</div>
<div className="buttons">
<button className="button" onClick={acceptConsent} id="acceptBtn">
Accept
</button>
<button className="button" onClick={declineConsent} id="declineBtn">
Decline
</button>
</div>
</div>
)}
</>
);
};
export default CookiesConsent;Explanation:
- We start by defining a functional component
CookiesConsent. - The component uses the
useCookieshook fromreact-cookieto manage cookies. - State variables
cookiesandshowConsentare initialized using theuseStatehook. - The
useEffecthook checks if the user has already accepted the cookies consent. - Functions
acceptConsentanddeclineConsenthandle the user’s consent actions. - The component conditionally renders based on the
showConsentstate, displaying a wrapper div containing header, data, and button sections.
CSS Styling:
Now, let’s delve into the CSS styles applied to the component:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
background-color: #1e1c27;
}
.wrapper {
position: absolute;
right: 30px;
bottom: 30px;
max-width: 345px;
width: 100%;
background: #fff;
border-radius: 8px;
padding: 15px 25px 22px;
transition: right 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
right: 20px;
}
.wrapper header {
display: flex;
align-items: center;
column-gap: 15px;
}
header i {
color: #4070f4;
font-size: 32px;
}
header h2 {
color: #4070f4;
font-weight: 500;
}
.wrapper .data {
margin-top: 16px;
}
.wrapper .data p {
color: #333;
font-size: 16px;
}
.data p a {
color: #4070f4;
text-decoration: none;
}
.data p a:hover {
text-decoration: underline;
}
.wrapper .buttons {
margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.buttons .button {
border: none;
color: #fff;
padding: 8px 0;
border-radius: 4px;
background: #4070f4;
cursor: pointer;
width: calc(100% / 2 - 10px);
transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
background-color: #034bf1;
}
#declineBtn {
border: 2px solid #4070f4;
background-color: #fff;
color: #4070f4;
}
#declineBtn:hover {
background-color: #4070f4;
color: #fff;
}Explanation:
- Global styles reset default browser styles and set the font family.
- Body styles define the background color and minimum height of the body.
- Component styles apply specific styles to the wrapper, ensuring it appears at the bottom right corner with a smooth transition.
Conclusion:
In this guide, we’ve covered the creation of a Cookies Consent component in React. By combining JSX structure with CSS styling, we’ve developed a user-friendly solution for managing cookies consent in compliance with privacy regulations. This component enhances the browsing experience while respecting user privacy preferences.
Happy Coding!
