In this article, we'll see that how can we create cookie banner in react.
The Architecture
This is going to be sort and sweet and assuming that you already know that what is cookie banner, react, etc
The Architecture
The Architecture is simple, we are going to have a CookieBanner component which will have it's own state. It'll show a banner on the UI and when user clicks on the accept or close buttton, the banner will gets removed.
Implementing this in Reach + Chakra-UI
import { useState, useEffect } from "react";
import { BellIcon } from "@chakra-ui/icons";
import {
Box,
HStack,
Icon,
Stack,
Text,
useColorModeValue,
Button,
} from "@chakra-ui/react";
import { getLocalStorage, setLocalStorage } from "@src/util";
export default function Banner() {
// by default do not show this banner
const [isCookieEnabled, setIsCookieEnabled] = useState(true);
useEffect(() => {
const isCookie = getLocalStorage("cookie-enabled");
setIsCookieEnabled(Boolean(isCookie));
}, []);
return isCookieEnabled ? null : (
<Box as="section" pt="8" pb="12" pos="fixed" bottom={"-50px"} w="100%" zIndex={10}>
<Stack
direction={{ base: "column", sm: "row" }}
justifyContent="center"
alignItems="center"
py="3"
px={{ base: "3", md: "6", lg: "8" }}
color="white"
bg={useColorModeValue("blue.600", "blue.400")}
>
<HStack spacing="3">
<Icon as={BellIcon} fontSize="2xl" h="10" />
<Text fontWeight="medium" marginEnd="2">
By using our website, you agree to the use of cookies as described
in our cookie policy
</Text>
</HStack>
<Button
w={{ base: "full", sm: "auto" }}
flexShrink={0}
colorScheme="green"
onClick={() => {
setLocalStorage("cookie-enabled", true);
setIsCookieEnabled(true);
}}
>
Accept
</Button>
</Stack>
</Box>
);
}
Desktop
Mobile
To see this in action open this page.
Top comments (0)