useCookie

A React hook for managing cookies with no dependencies.

Installation

1npm install react-use-cookie

or

1yarn add react-use-cookie

Usage

useCookie

1import useCookie from 'react-use-cookie';
2
3export default (props) => {
4  const [userToken, setUserToken, removeUserToken] = useCookie('token', '0');
5
6  render(
7    <div>
8      <p>{userToken}</p>
9      <button onClick={() => setUserToken('123')}>Change token</button>
10      <button onClick={removeUserToken}>Remove token</button>
11    </div>
12  );
13};

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

1setUserToken('abcd', {
2  days: 365,
3  SameSite: 'Strict',
4  Secure: true,
5});

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:

1import { getCookie } from 'react-use-cookie';
2
3const getUser = () => {
4  const xsrfToken = getCookie('XSRF-TOKEN');
5  // use to call your API etc
6};

setCookie

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

1import { setCookie } from 'react-use-cookie';
2
3const saveLocale = (locale) => {
4  setCookie('locale', locale, {
5    days: 1,
6    domain: 'github.com',
7    SameSite: 'Lax',
8    Secure: true,
9  });
10};

You can also specify cookie options as a third argument:

1{
2  // The number of days the cookie is stored (defaults to 7)
3  days?: number;
4
5  // The path of the cookie (defaults to '/')
6  path?: string;
7
8  // Browser defaults unless set
9  domain?: string;
10  SameSite?: 'None' | 'Lax' | 'Strict';
11  Secure?: boolean;
12  HttpOnly?: boolean;
13}

removeCookie

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

1import { removeCookie } from 'react-use-cookie';
2
3removeCookie('token');