Skip to content

Instantly share code, notes, and snippets.

@KristofferEriksson
Created January 29, 2024 09:16
Show Gist options
  • Save KristofferEriksson/ad20875de7a9e7723dceceb1b57e8c76 to your computer and use it in GitHub Desktop.
Save KristofferEriksson/ad20875de7a9e7723dceceb1b57e8c76 to your computer and use it in GitHub Desktop.
A hook to easily read and update browser cookies. Plus, it auto-updates your component when cookie values change
import { useEffect, useState } from "react";
type UseCookieReturnType = {
cookie: string | undefined;
setCookie: (value: string, days?: number) => void;
};
const useCookie = (cookieName: string): UseCookieReturnType => {
const getCookie = (name: string): string | undefined => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop()?.split(";").shift();
};
const setCookie = (name: string, value: string, days?: number): void => {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = `; expires=${date.toUTCString()}`;
}
document.cookie = `${name}=${value}${expires}; path=/`;
};
const [cookie, setCookieState] = useState<string | undefined>(() =>
getCookie(cookieName)
);
useEffect(() => {
const intervalId = window.setInterval(() => {
const newCookie = getCookie(cookieName);
if (newCookie !== cookie) setCookieState(newCookie);
}, 100);
return () => {
window.clearInterval(intervalId);
};
}, [cookie, cookieName]);
return {
cookie,
setCookie: (value: string, days?: number) =>
setCookie(cookieName, value, days),
};
};
export default useCookie;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment