Replace react-cookie with custom hook

Author: adamgraham

src/components/CookieConsent.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useCookies } from 'react-cookie';
 import classNames from 'classnames';
 import React from 'react';
 import Button from './Button';
 import Link from './Link';
 import ReactPortal from './ReactPortal';
+import { useCookie } from '../hooks';
 import type { ThemeToken } from '../types';
 
 const COOKIE_NAME = 'cookieconsent_status';
@@ -28,8 +28,8 @@ export default function CookieConsent({
   rootElement = 'body',
   theme = 'high-contrast',
 }: CookieConsentProps) {
-  const [cookies, setCookie] = useCookies([COOKIE_NAME]);
-  if (cookies[COOKIE_NAME] === COOKIE_VALUE) return null;
+  const [cookie, setCookie] = useCookie(COOKIE_NAME);
+  if (cookie === COOKIE_VALUE) return null;
   return (
     <ReactPortal rootElement={rootElement}>
       <div
@@ -57,7 +57,7 @@ export default function CookieConsent({
             aria-label={buttonText}
             className="cookie-consent__button"
             onClick={() => {
-              setCookie(COOKIE_NAME, COOKIE_VALUE, { path: '/' });
+              setCookie(COOKIE_VALUE);
               onConsent(true);
             }}
             shape="square"

src/hooks/index.ts

@@ -1,7 +1,7 @@
 export * from './useBodyOverflow';
 export * from './useBreakpoint';
+export * from './useCookie';
 export * from './useElementSize';
-export * from './useIsLoaded';
 export * from './useIsMounted';
 export * from './useIsomorphicLayoutEffect';
 export * from './useKeyboardEvent';

src/hooks/useCookie.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import Cookies from 'universal-cookie';
+import type { Cookie, CookieSetOptions } from 'universal-cookie';
+
+export function useCookie(
+  key: string,
+): [
+  Cookie,
+  (value: Cookie, options?: CookieSetOptions) => void,
+  (options?: CookieSetOptions) => void,
+] {
+  const [cookies] = useState(() => new Cookies());
+  const [cookie, setCookieValue] = useState<Cookie>(() => {
+    const value = cookies.get(key);
+    if (value) return value;
+    return null;
+  });
+
+  const setCookie = useCallback(
+    (value: Cookie, options?: CookieSetOptions) => {
+      cookies.set(key, value, options);
+      setCookieValue(value);
+    },
+    [cookies, key],
+  );
+
+  const removeCookie = useCallback(
+    (options?: CookieSetOptions) => {
+      cookies.remove(key, options);
+      setCookieValue(null);
+    },
+    [key],
+  );
+
+  return [cookie, setCookie, removeCookie];
+}