Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthewmueller/next-cookies
Tiny little function for getting cookies on both client & server with next.js.
https://github.com/matthewmueller/next-cookies
Last synced: about 2 months ago
JSON representation
Tiny little function for getting cookies on both client & server with next.js.
- Host: GitHub
- URL: https://github.com/matthewmueller/next-cookies
- Owner: matthewmueller
- Created: 2016-12-30T08:15:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-14T16:26:16.000Z (4 months ago)
- Last Synced: 2024-07-29T17:04:47.893Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 391 KB
- Stars: 369
- Watchers: 8
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Next Cookies
[](https://travis-ci.org/matthewmueller/next-cookies)
Tiny little function for getting cookies on both client & server with [next.js](https://nextjs.org).
This enables easy client-side and server-side rendering of pages that depend on cookies.
## Installation
```
yarn add next-cookies
```
or
```
npm install --save next-cookies
```
## Usage
### Read all cookies:
```js
const allCookies = cookies(ctx);
```
`allCookies` will be an object with keys for each cookie.
The `ctx` object is passed to your [`getInitialProps`](https://nextjs.org/docs#fetching-data-and-component-lifecycle) function by next.js.
JSON is parsed automatically, to disable this behavior pass an options object with `doNotParse` set to `true`:
```js
const allCookies = cookies(ctx, {doNotParse: true});
```
The options object is passed directly to the underlying [universal-cookie](https://www.npmjs.com/package/universal-cookie) library.
### Read a single cookie:
```js
const { myCookie } = cookies(ctx);
```
or
```js
const myCookie = cookies(ctx).myCookie;
```
The `ctx` object is passed to your [`getInitialProps`](https://nextjs.org/docs#fetching-data-and-component-lifecycle) function by next.js.
### Set a cookie:
This library does not support setting cookies. However, this is how to do it in client-side code:
```js
document.cookie = `foo=bar; path=/`;
```
This sets a cookie named `foo` to the value `bar`.
The `path` portion is optional but usually desired.
An expiration date may be appended (see below), otherwise the cookie will be deleted whenever the browser is closed.
### Delete a cookie:
This library does not support deleting cookies. However, this is how to do it in client-side code:
```js
document.cookie = `foo=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`;
```
The value doesn't matter, although the `path` does. The expiration date must be in the past.
## Complete Example
```js
import React from 'react'
import cookies from 'next-cookies'
class NameForm extends React.Component {
static async getInitialProps(ctx) {
return {
initialName: cookies(ctx).name || ''
}
}
constructor(props) {
super(props);
this.state = {name: props.initialName || ''};
this.handleChange = this.handleChange.bind(this);
this.reset = this.reset.bind(this);
}
handleChange(event) {
const newName = event.target.value;
this.setState({name: newName});
document.cookie = `name=${newName}; path=/`;
}
reset() {
this.setState({name: ''});
document.cookie = 'name=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT';
}
render() {
return (
Hi {this.state.name}
Change cookie: !
Delete cookie: Reset
);
}
}
export default NameForm
```
See, also, the test app: https://github.com/matthewmueller/next-cookies/blob/master/tests/test-app/pages/cookies.js
## More Information
* https://www.npmjs.com/package/universal-cookie
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
* https://tools.ietf.org/html/rfc6265
## License
MIT