react-cookie

Hello {this.state.name}!

react-cookie

Universal cookies for React

Integrations

universal-cookie - Universal cookies for JavaScript
universal-cookie-express - Hook cookies get/set on Express for server-rendering

Getting started

npm install react-cookie

`<CookiesProvider />`

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

// Root.jsx
import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';
 
export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

// 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 (
      <div>
        <NameForm name={name} onChange={this.handleNameChange.bind(this)} />
        {this.state.name && <h1>Hello {this.state.name}!</h1>}
      </div>
    );
  }
}
 
export default withCookies(App);

Server-Rendering Example

// 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 (
      <div>
        <NameForm name={name} onChange={this.handleNameChange.bind(this)} />
        {this.state.name && <h1>Hello {this.state.name}!</h1>}
      </div>
    );
  }
}
 
export default withCookies(App);

// 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(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );
 
  const html = ReactDOMServer.renderToStaticMarkup(<Html markup={markup} />);
 
  res.send('<!DOCTYPE html>' + html);
}

// 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(
  <CookiesProvider>
    <App />
  </CookiesProvider>,
  appEl
);

// server.js
require('babel-register');
 
const express = require('express');
const serverMiddleware = require('./src/server').default;
const cookiesMiddleware = require('universal-cookie-express');
 
const app = express();
 
app
  .use('/assets', express.static('dist'))
  .use(cookiesMiddleware())
  .use(serverMiddleware);
 
app.listen(8080, function() {
  console.log('Listening on 8080...'); // eslint-disable-line no-console
});

react-cookie

Hello {this.state.name}!

Integrations

Getting started

`<CookiesProvider />`

`withCookies(Component)`

Cookies

`get(name, [options])`

`getAll([options])`

`set(name, value, [options])`

`remove(name, [options])`

Simple Example

Server-Rendering Example

Manage permissions for the whole team

Collaborators list

Stats

Try it out

Keywords

Dependencies (3)

Dependents (134)