DEV Community

Rahul kumar
Rahul kumar

Posted on

3 1

Create Cookie banner in React

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Desktop

Image description

Mobile

Image description
To see this in action open this page.

Thank You

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay