react-cookies

Load and save cookies with React

Install

1$ npm install react-cookies --save

Usage

1import { Component } from 'react'
2import cookie from 'react-cookies'
3
4import LoginPanel from './LoginPanel'
5import Dashboard from './Dashboard'
6
7class MyApp extends Component {
8  constructor () {
9    super()
10
11    this.onLogin = this.onLogin.bind(this)
12    this.onLogout = this.onLogout.bind(this)
13  }
14
15  componentWillMount() {
16    this.state =  { userId: cookie.load('userId') }
17  }
18
19  onLogin(userId) {
20    this.setState({ userId })
21    cookie.save('userId', userId, { path: '/' })
22  }
23
24  onLogout() {
25    cookie.remove('userId', { path: '/' })
26  }
27
28  render() {
29    const { userId } = this.state
30
31    if (!userId) {
32      return <LoginPanel onSuccess={this.onLogin} />
33    }
34
35    return <Dashboard userId={userId} />
36  }
37}

React cookies is the v1.0.4 of react-cookie with a couple changes.

Isomorphic cookies!

To be able to access user cookies while doing server-rendering, you can use plugToRequest or setRawCookie.

API

.load(name, [doNotParse])

Load the cookie value.
Returns undefined if the cookie does not exist.
Deserialize any cookie starting with { or [ unless dotNotParse is true.

name

Type: string
Required

doNotParse

Type: boolean
Default: false

Example

1import cookie from 'react-cookies'
2
3componentWillMount() {
4  this.state =  { token: cookie.load('token') }
5  // => 123456789
6}

.loadAll()

Load all available cookies.
Returns an object containing all cookies.

Example

1import cookie from 'react-cookies'
2
3componentWillMount() {
4  this.state =  { cookies: cookie.loadAll() }
5  // => { cookies: { token: 123456789, _ga: GA198712 } }
6}

.select([regex])

Find all the cookies with a name that match the regex.
Returns an object with the cookie name as the key.

Example

1import cookie from 'react-cookies'
2
3componentWillMount() {
4  this.state =  { tests: cookie.select(/\btest(er|ing|ed|s)?\b/g) }
5  // => { tests: { test: 'test', 'testing': 'testing' } }
6}

.save(name, value, [options])

Set a cookie.

name

Type: string
Required

value

Type: string||number||object
Required

options

Support all the cookie options from the RFC 6265.

Type: object

path

Cookie path.
Use / as the path if you want your cookie to be accessible on all pages.

Type: string

expires

Absolute expiration date for the cookie.

Type: object (date)

maxAge

Relative max age of the cookie from when the client receives it in seconds.

Type: number

domain

Domain for the cookie.
Use https://*.yourdomain.com if you want to access the cookie in all your subdomains.

Type: string

secure

If set true it will only be accessible through https.

Type: boolean

httpOnly

If set true it will only be accessible on the server.

Type: boolean

Example

1import cookie from 'react-cookies'
2
3handleButtonClick() {
4  const expires = new Date()
5   expires.setDate(Date.now() + 1000 * 60 * 60 * 24 * 14)
6
7  cookie.save(
8    'userId',
9    '1234',
10    {
11      path: '/',
12      expires,
13      maxAge: 1000,
14      domain: 'https://play.bukinoshita.io',
15      secure: true
16      httpOnly: true
17    }
18  )
19}

.remove(name, [options])

Remove a cookie.

name

Type: string
Required

options

Support all the cookie options from the RFC 6265.

Type: object

path

Cookie path.
Use / as the path if you want your cookie to be accessible on all pages.

Type: string

expires

Absolute expiration date for the cookie.

Type: object (date)

maxAge

Relative max age of the cookie from when the client receives it in seconds.

Type: number

domain

Domain for the cookie.
Use https://*.yourdomain.com if you want to access the cookie in all your subdomains.

Type: string

secure

If set true it will only be accessible through https.

Type: boolean

httpOnly

If set true it will only be accessible on the server.

Type: boolean

Example

1import cookie from 'react-cookies'
2
3handleButtonClick() {
4  cookie.remove('userId', { path: '/' })
5}

.plugToRequest(req, res): unplug()

Load the user cookies so you can do server-rendering and match the same result.
Also send back to the user the new cookies.
Work with connect or express.js by using the cookieParser middleware first.
Use const unplug = plugToRequest(req, res) just before your renderToString.

Returns unplug() function so it stops setting cookies on the response.

.setRawCookie(cookies)

Load the user cookies so you can do server-rendering and match the same result.
Use setRawCookie(headers.cookie) just before your renderToString.
Make sure it is the raw string from the request headers.

License

MIT © Bu Kinoshita