useCookie

A React hook for managing cookies with no dependencies.

Installation

npm install react-use-cookie

or

yarn add react-use-cookie

Usage

useCookie

import useCookie from 'react-use-cookie';

export default (props) => {
  const [userToken, setUserToken, removeUserToken] = useCookie('token', '0');

  render(
    <div>
      <p>{userToken}</p>
      <button onClick={() => setUserToken('123')}>Change token</button>
      <button onClick={removeUserToken}>Remove token</button>
    </div>
  );
};

In this example you can also set custom cookie options by passing an options object to setUserToken:

setUserToken('abcd', {
  days: 365,
  SameSite: 'Strict',
  Secure: true,
});

See setCookie for more option information about this.

As a convenience this package also exports the get and set functions so they can be used directly.

getCookie

If you need to access a cookie outside of a React component, you can use the exported getCookie function:

import { getCookie } from 'react-use-cookie';

const getUser = () => {
  const xsrfToken = getCookie('XSRF-TOKEN');
  // use to call your API etc
};

setCookie

If you need to set a cookie outside of a React component, you can use the exported setCookie function:

import { setCookie } from 'react-use-cookie';

const saveLocale = (locale) => {
  setCookie('locale', locale, {
    days: 1,
    domain: 'github.com',
    SameSite: 'Lax',
    Secure: true,
  });
};

You can also specify cookie options as a third argument:

{
  // The number of days the cookie is stored (defaults to 7)
  days?: number;

  // The path of the cookie (defaults to '/')
  path?: string;

  // Browser defaults unless set
  domain?: string;
  SameSite?: 'None' | 'Lax' | 'Strict';
  Secure?: boolean;
  HttpOnly?: boolean;
}

removeCookie

If you need to remove a cookie outside of a React component, you can use the exported removeCookie function:

import { removeCookie } from 'react-use-cookie';

removeCookie('token');