A React hook for managing cookies with no dependencies.
npm install react-use-cookieor
yarn add react-use-cookieimport 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>
);
};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.
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
};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;
}