Simple NextJS & Tailwind Accept Cookies Banner

What is it?

All websites now require that annoyingly little box that says you "must accept cookies to use the site" - we've seen them everywhere, so lets not get into the politics of wether these are beneficial or just annoying, and lets just face the fact that we should put one on our site and forget about it.

We are going to use localStorage to save the users acceptance of the agreement, although you've probably heard of it being called the "Cookie-Law" it's actually the Privacy and Electronic Communications Directive 2002/58/EC and relates to the storing of all information regardless of wether it's a cookie, localStorage or a note attached to a pigeon! Also it makes the code below a bit smaller and neater. We are also ignoring older browsers.

Lets create a file called CookieAcceptance.tsx

import { useEffect, useState } from "react";

export default function CookieAcceptance() {
  const [show, setShow] = useState(false);

  const handleAcceptClick = () => {
    setShow(false);
    window.localStorage.setItem("cookie_agreement", Date.now().toString());
  };

  useEffect(() => {
    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem("cookie_agreement") === null) {
        setShow(true);
    }
  }, []);

  return (
    show ? <>
      <div className="fixed left-0 bottom-0 right-0 px-4 py-2 pb-4 bg-white border-2 w-72 md:w-96 m-5 rounded-lg">
        <h3 className="text-lg text-gray-900">Cookie Notice</h3>
        <div className="text-base text-gray-500">
          This website uses cookies to store information, by using this website
          you agree to its terms.
        </div>
        <button
          className="bg-cyan-800 text-white px-4 py-1 rounded border border-cyan-900 block mt-3 ml-auto"
          onClick={handleAcceptClick}
        >
          I Accept
        </button>
      </div>
    </> : null
  );
}

Now include this on your websites footer across all pages and hey presto you've got yourself a cookie acceptance banner.