Universal cookies for React
## Integrations
- [`universal-cookie`](https://www.npmjs.com/package/universal-cookie) - Universal cookies for JavaScript
- [`universal-cookie-express`](https://www.npmjs.com/package/universal-cookie-express) - Hook cookies get/set on Express for server-rendering
## Minimum requirement
### react-cookie @ v3.0+
- React.js >= 16.3.0 (new context API + forward ref)
### react-cookie @ v0.0-v2.2
- React.js >= 15
## Getting started
`npm install react-cookie`
or in the browser (global variable `ReactCookie`):
```html
```
## ``
Set the user cookies
On the server, the `cookies` props must be set using `req.universalCookies` or `new Cookie(cookieHeader)`
- defaultSetOptions: You can set default values for when setting cookies.
## `useCookies([dependencies], [options])`
Access and modify cookies using React hooks.
```jsx
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);
```
**React hooks are available starting from React 16.8**
### `dependencies` (optional)
Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.
### `options` (optional)
- options (object):
- doNotParse (boolean): do not convert the cookie into an object no matter what
- doNotUpdate (boolean): do not update the cookies when the component mounts
```jsx
const [cookies, setCookie, removeCookie] = useCookies(['cookie-name'], {
doNotParse: true,
});
```
### `cookies`
Javascript object with all your cookies. The key is the cookie name.
### `setCookie(name, value, [options])`
Set a cookie value
- name (string): cookie name
- value (string|object): save the value and stringify the object if needed
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages
- expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in seconds
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**
- sameSite (boolean|none|lax|strict): Strict or Lax enforcement
- partitioned (boolean): Indicates that the cookie should be stored using partitioned storage
### `removeCookie(name, [options])`
Remove a cookie
- name (string): cookie name
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages
- expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in seconds
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**
- sameSite (boolean|none|lax|strict): Strict or Lax enforcement
- partitioned (boolean): Indicates that the cookie should be stored using partitioned storage
### `updateCookies()`
Read back the cookies from the browser and triggers the change listeners. This should normally not be necessary because this library detects cookie changes automatically.
## `withCookies(Component)`
Give access to your cookies anywhere. Add the following props to your component:
- cookies: Cookies instance allowing you to get, set and remove cookies.
- allCookies: All your current cookies in an object.
Your original static properties will be hoisted on the returned component. You can also access the original component by using the `WrappedComponent` static property. Example:
```jsx
function MyComponent() {
return null;
}
const NewComponent = withCookies(MyComponent);
NewComponent.WrappedComponent === MyComponent;
```
## Cookies
### `get(name, [options])`
Get a cookie value
- name (string): cookie name
- options (object):
- doNotParse (boolean): do not convert the cookie into an object no matter what
### `getAll([options])`
Get all cookies
- options (object):
- doNotParse (boolean): do not convert the cookie into an object no matter what
### `set(name, value, [options])`
Set a cookie value
- name (string): cookie name
- value (string|object): save the value and stringify the object if needed
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages
- expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in seconds
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**
- sameSite (boolean|none|lax|strict): Strict or Lax enforcement
- partitioned (boolean): Indicates that the cookie should be stored using partitioned storage
### `remove(name, [options])`
Remove a cookie
- name (string): cookie name
- options (object): Support all the cookie options from RFC 6265
- path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages
- expires (Date): absolute expiration date for the cookie
- maxAge (number): relative max age of the cookie from when the client receives it in seconds
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**
- sameSite (boolean|none|lax|strict): Strict or Lax enforcement
- partitioned (boolean): Indicates that the cookie should be stored using partitioned storage
## Simple Example with React hooks
```tsx
// Root.tsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
export default function Root(): React.ReactElement {
return (
);
}
```
```tsx
// App.tsx
import React from 'react';
import { useCookies } from 'react-cookie';
import NameForm from './NameForm';
interface CookieValues {
name?: string;
}
function App(): React.ReactElement {
const [cookies, setCookie] = useCookies<'name', CookieValues>(['name']);
function onChange(newName: string): void {
setCookie('name', newName);
}
return (
{cookies.name &&
Hello {cookies.name}!
}
);
}
export default App;
```
## Simple Example with Higher-Order Component
```tsx
// Root.tsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
export default function Root(): React.ReactElement {
return (
);
}
```
```tsx
// App.tsx
import React, { Component } from 'react';
import { withCookies, Cookies, ReactCookieProps } from 'react-cookie';
import NameForm from './NameForm';
interface State {
name: string;
}
interface Props extends ReactCookieProps {
cookies: Cookies;
}
class App extends Component {
constructor(props: Props) {
super(props);
const { cookies } = props;
this.state = {
name: cookies.get('name') || 'Ben',
};
}
handleNameChange(name: string): void {
const { cookies } = this.props;
cookies.set('name', name, { path: '/' });
this.setState({ name });
}
render(): React.ReactNode {
const { name } = this.state;
return (
{this.state.name &&
Hello {this.state.name}!
}
);
}
}
export default withCookies(App);
```
## Server-Rendering Example
```ts
// src/components/App.ts
import React from 'react';
import { useCookies } from 'react-cookie';
import NameForm from './NameForm';
function App() {
const [cookies, setCookie] = useCookies(['name']);
function onChange(newName: string) {
setCookie('name', newName, { path: '/' });
}
return (
{cookies.name &&
Hello {cookies.name}!
}
);
}
export default App;
```
```ts
// src/server.ts
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';
import { Request, Response } from 'express';
import Html from './components/Html';
import App from './components/App';
export default function middleware(req: Request, res: Response) {
const markup = ReactDOMServer.renderToString(
,
);
const html = ReactDOMServer.renderToStaticMarkup();
res.send('' + html);
}
```
```ts
// src/client.ts
import React from 'react';
import { createRoot } from 'react-dom/client';
import { CookiesProvider } from 'react-cookie';
import App from './components/App';
const root = createRoot(document.getElementById('main-app'));
root.render(
,
);
```
```ts
// server.ts
import express from 'express';
import serverMiddleware from './src/server';
import cookiesMiddleware from 'universal-cookie-express';
const app = express();
app.use(cookiesMiddleware()).use(serverMiddleware);
app.listen(8080, function () {
console.log('Listening on 8080...');
});
```