react-cookies
Version:
Load and save cookies with React
286 lines (180 loc) • 5.51 kB
Markdown
> Load and save cookies with React
```bash
$ npm install react-cookies --save
```
```js
import { Component } from 'react'
import cookie from 'react-cookies'
import LoginPanel from './LoginPanel'
import Dashboard from './Dashboard'
class MyApp extends Component {
constructor () {
super()
this.onLogin = this.onLogin.bind(this)
this.onLogout = this.onLogout.bind(this)
}
componentWillMount() {
this.state = { userId: cookie.load('userId') }
}
onLogin(userId) {
this.setState({ userId })
cookie.save('userId', userId, { path: '/' })
}
onLogout() {
cookie.remove('userId', { path: '/' })
}
render() {
const { userId } = this.state
if (!userId) {
return <LoginPanel onSuccess={this.onLogin} />
}
return <Dashboard userId={userId} />
}
}
```
_React cookies is the v1.0.4 of react-cookie with a couple changes._
To be able to access user cookies while doing server-rendering, you can use [`plugToRequest`](
Load the cookie value.<br />
Returns `undefined` if the cookie does not exist.<br />
Deserialize any cookie starting with `{` or `[` unless `dotNotParse` is `true`.
Type: `string`<br/>
Required
Type: `boolean`<br/>
Default: false
```js
import cookie from 'react-cookies'
componentWillMount() {
this.state = { token: cookie.load('token') }
// => 123456789
}
```
Load all available cookies.<br />
Returns an `object` containing all cookies.
```js
import cookie from 'react-cookies'
componentWillMount() {
this.state = { cookies: cookie.loadAll() }
// => { cookies: { token: 123456789, _ga: GA198712 } }
}
```
Find all the cookies with a name that match the regex.<br />
Returns an `object` with the cookie name as the key.
```js
import cookie from 'react-cookies'
componentWillMount() {
this.state = { tests: cookie.select(/\btest(er|ing|ed|s)?\b/g) }
// => { tests: { test: 'test', 'testing': 'testing' } }
}
```
Set a cookie.
Type: `string`<br/>
Required
Type: `string`||`number`||`object`<br/>
Required
Support all the cookie options from the [RFC 6265](https://tools.ietf.org/html/rfc6265#section-4.1.2.1).
Type: `object`
Cookie path.<br/>
Use `/` as the path if you want your cookie to be accessible on all pages.
Type: `string`
Absolute expiration date for the cookie.
Type: `object (date)`
Relative max age of the cookie from when the client receives it in `seconds`.
Type: `number`
Domain for the cookie.<br/>
Use `https://*.yourdomain.com` if you want to access the cookie in all your subdomains.
Type: `string`
If set `true` it will only be accessible through https.
Type: `boolean`
If set `true` it will only be accessible on the server.
Type: `boolean`
```js
import cookie from 'react-cookies'
handleButtonClick() {
const expires = new Date()
expires.setDate(Date.now() + 1000 * 60 * 60 * 24 * 14)
cookie.save(
'userId',
'1234',
{
path: '/',
expires,
maxAge: 1000,
domain: 'https://play.bukinoshita.io',
secure: true
httpOnly: true
}
)
}
```
Remove a cookie.
Type: `string`<br/>
Required
Support all the cookie options from the [RFC 6265](https://tools.ietf.org/html/rfc6265#section-4.1.2.1).
Type: `object`
Cookie path.<br/>
Use `/` as the path if you want your cookie to be accessible on all pages.
Type: `string`
Absolute expiration date for the cookie.
Type: `object (date)`
Relative max age of the cookie from when the client receives it in `seconds`.
Type: `number`
Domain for the cookie.<br/>
Use `https://*.yourdomain.com` if you want to access the cookie in all your subdomains.
Type: `string`
If set `true` it will only be accessible through https.
Type: `boolean`
If set `true` it will only be accessible on the server.
Type: `boolean`
```js
import cookie from 'react-cookies'
handleButtonClick() {
cookie.remove('userId', { path: '/' })
}
```
Load the user cookies so you can do server-rendering and match the same result.<br />
Also send back to the user the new cookies.<br />
Work with [connect](https://github.com/senchalabs/connect) or [express.js](https://github.com/expressjs/express) by using the cookieParser middleware first.<br />
Use `const unplug = plugToRequest(req, res)` just before your `renderToString`.<br />
<br />
Returns `unplug()` function so it stops setting cookies on the response.
Load the user cookies so you can do server-rendering and match the same result.<br />
Use `setRawCookie(headers.cookie)` just before your `renderToString`.<br />
Make sure it is the raw string from the request headers.<br />
[](https://github.com/bukinoshita/react-cookies/blob/master/LICENSE) © Bu Kinoshita