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>
  );
}

Desktop

Mobile

To see this in action open this page.

Thank You