useCookie

React hook that facilitates the storage, updating and deletion of values within the CookieStore

Usage

Live Editor

function Demo() {
  const defaultOption = {
    path: "/",
  };

  const cookieName = "cookie-key";
  const [cookieValue, updateCookie, refreshCookie] = useCookie(
    cookieName,
    defaultOption,
    "default-value"
  );

  const updateButtonClick = () => {
    updateCookie("new-cookie-value");
  };

  const deleteButtonClick = () => {
    updateCookie(undefined);
  };

  const change = () => {
    if ("cookieStore" in window) {
      const store = window.cookieStore as any;
      store.set({ name: cookieName, value: "changed" });
    } else {
      document.cookie = `${cookieName}=changed; path=/`;
    }
  };

  return (
    <div>
      <p>Click on the button to update or clear the cookie</p>
      <p color="blue">cookie: {cookieValue || "no value"}</p>
      <button onClick={updateButtonClick}>Update the cookie</button>
      <button onClick={deleteButtonClick}>Clear the cookie</button>
      <button onClick={change}>
        Changing the cookie through other methods
      </button>
      <button onClick={refreshCookie}>Refresh the cookie</button>
    </div>
  );
}

Result

Loading...

API

useCookie

Returns

readonly [UseCookieState, (newValue: UseCookieState | ((prevState: UseCookieState) => UseCookieState)) => void, () => void]: A tuple with the following elements:

• The current value of the cookie.
• A function to update the value of the cookie.
• A function to refresh the value of the cookie, incase other events change it.

Arguments

Argument	Description	Type	DefaultValue
key	key	string (Required)	-
options	option pass to js-cookie	any	-
defaultValue	defaultValue, must be required in ssr	string | undefined	-

useCookieState

Type

export type UseCookieState = string | undefined;