struct-ui-components/src/hooks/useCookie/useCookie.ts

A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.

import Cookies from "js-cookie";
import { useCallback, useState } from "react";

export const useCookie = (
  name: string,
  defaultValue: string,
): [
  string | null,
  (newValue: string, options?: Cookies.CookieAttributes) => void,
  () => void,
] => {
  const [value, setValue] = useState<string | null>(() => {
    const cookie = Cookies.get(name);
    if (cookie) return cookie;
    Cookies.set(name, defaultValue);
    return defaultValue;
  });

  const updateCookie = useCallback(
    (newValue: string, options?: Cookies.CookieAttributes) => {
      Cookies.set(name, newValue, options);
      setValue(newValue);
    },
    [name],
  );

  const deleteCookie = useCallback(() => {
    Cookies.remove(name);
    setValue(null);
  }, [name]);

  return [value, updateCookie, deleteCookie];
};