useCookie

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

note

When you use setCookieValue with useCookie hook that shares the same key across multiple components, it does not trigger an update in the other components using this hook.

If you want a broadcast effect, you can refer to the following https://github.com/childrentime/reactuse/issues/91

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