react-use-cookie

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] = useCookie('token', '0');

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

You can also specify an optional third argument - an options object with the following keys:

{
  // The number of days the cookie is stored (defaults to 7)
  days: number;
  // The path of the cookie (defaults to '/')
  path: string;
}

This package also has a few other exports that can be used directly.

getCookie

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

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 named setCookie export:

import { setCookie } from 'react-use-cookie';
const saveLocale = locale => {
  setCookie('locale', locale);
};

You can also specify an optional third argument - the same options object as above:

{
  // The number of days the cookie is stored (defaults to 7)
  days: number;
  // The path of the cookie (defaults to '/')
  path: string;
}

Changelog

v1.1.0 (2020-06-17)

Features

• Expose the getCookie and setCookie function