Universal cookies for React
[](https://travis-ci.org/reactivestack/cookies)
[](https://saucelabs.com/u/coookies)
## 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
## Getting started
`npm install react-cookie`
## ``
Set the user cookies
On the server, the `cookies` props must be set using `req.universalCookies` or `new Cookie(cookieHeader)`
## `withCookies(Component)`
Give access to cookies by providing it using the `cookies` prop.
## 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 second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
### `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 second
- domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)
- secure (boolean): Is only accessible through HTTPS?
- httpOnly (boolean): Is only the server can access the cookie?
## Simple Example
```js
// Root.jsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
export default function Root() {
return (
);
}
```
```js
// App.jsx
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';
class App extends Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
componentWillMount() {
const { cookies } = this.props;
this.state = {
name: cookies.get('name') || 'Ben'
};
}
handleNameChange(name) {
const { cookies } = this.props;
cookies.set('name', name, { path: '/' });
this.setState({ name });
}
render() {
const { name } = this.state;
return (
{this.state.name &&
Hello {this.state.name}!
}
);
}
}
export default withCookies(App);
```
## Server-Rendering Example
```js
// src/components/App.js
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import NameForm from './NameForm';
class App extends Component {
static propTypes = {
cookies: instanceOf(Cookies).isRequired
};
componentWillMount() {
const { cookies } = this.props;
this.state = {
name: cookies.get('name') || 'Ben'
};
}
handleNameChange(name) {
const { cookies } = this.props;
cookies.set('name', name, { path: '/' });
this.setState({ name });
}
render() {
const { name } = this.state;
return (
{this.state.name &&
Hello {this.state.name}!
}
);
}
}
export default withCookies(App);
```
```js
// src/server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';
import Html from './components/Html';
import App from './components/App';
export default function middleware(req, res) {
const markup = ReactDOMServer.renderToString(
);
const html = ReactDOMServer.renderToStaticMarkup( );
res.send('' + html);
}
```
```js
// src/client.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CookiesProvider } from 'react-cookie';
import App from './components/App';
const appEl = document.getElementById('main-app');
ReactDOM.render(