\n\n## Integrations\n\n- [`universal-cookie`](https://www.npmjs.com/package/universal-cookie) - Universal cookies for JavaScript\n- [`universal-cookie-express`](https://www.npmjs.com/package/universal-cookie-express) - Hook cookies get/set on Express for server-rendering\n\n## Minimum requirement\n\n### react-cookie @ v3.0+\n\n- React.js >= 16.3.0 (new context API + forward ref)\n\n### react-cookie @ v0.0-v2.2\n\n- React.js >= 15\n\n## Getting started\n\n`npm install react-cookie`\n\nor in the browser (global variable `ReactCookie`):\n\n```html\n\n\n\n```\n\n## ``\n\nSet the user cookies\n\nOn the server, the `cookies` props must be set using `req.universalCookies` or `new Cookie(cookieHeader)`\n\n- defaultSetOptions: You can set default values for when setting cookies.\n\n## `useCookies([dependencies], [options])`\n\nAccess and modify cookies using React hooks.\n\n```jsx\nconst [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);\n```\n\n**React hooks are available starting from React 16.8**\n\n### `dependencies` (optional)\n\nLet you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.\n\n### `options` (optional)\n\n- options (object):\n - doNotParse (boolean): do not convert the cookie into an object no matter what\n - doNotUpdate (boolean): do not update the cookies when the component mounts\n\n```jsx\nconst [cookies, setCookie, removeCookie] = useCookies(['cookie-name'], {\n doNotParse: true,\n});\n```\n\n### `cookies`\n\nJavascript object with all your cookies. The key is the cookie name.\n\n### `setCookie(name, value, [options])`\n\nSet a cookie value\n\n- name (string): cookie name\n- value (string|object): save the value and stringify the object if needed\n- options (object): Support all the cookie options from RFC 6265\n - path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages\n - expires (Date): absolute expiration date for the cookie\n - maxAge (number): relative max age of the cookie from when the client receives it in seconds\n - domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)\n - secure (boolean): Is only accessible through HTTPS?\n - httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**\n - sameSite (boolean|none|lax|strict): Strict or Lax enforcement\n - partitioned (boolean): Indicates that the cookie should be stored using partitioned storage\n\n### `removeCookie(name, [options])`\n\nRemove a cookie\n\n- name (string): cookie name\n- options (object): Support all the cookie options from RFC 6265\n - path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages\n - expires (Date): absolute expiration date for the cookie\n - maxAge (number): relative max age of the cookie from when the client receives it in seconds\n - domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)\n - secure (boolean): Is only accessible through HTTPS?\n - httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**\n - sameSite (boolean|none|lax|strict): Strict or Lax enforcement\n - partitioned (boolean): Indicates that the cookie should be stored using partitioned storage\n\n### `updateCookies()`\n\nRead back the cookies from the browser and triggers the change listeners. This should normally not be necessary because this library detects cookie changes automatically.\n\n## `withCookies(Component)`\n\nGive access to your cookies anywhere. Add the following props to your component:\n\n- cookies: Cookies instance allowing you to get, set and remove cookies.\n- allCookies: All your current cookies in an object.\n\nYour original static properties will be hoisted on the returned component. You can also access the original component by using the `WrappedComponent` static property. Example:\n\n```jsx\nfunction MyComponent() {\n return null;\n}\nconst NewComponent = withCookies(MyComponent);\nNewComponent.WrappedComponent === MyComponent;\n```\n\n## Cookies\n\n### `get(name, [options])`\n\nGet a cookie value\n\n- name (string): cookie name\n- options (object):\n - doNotParse (boolean): do not convert the cookie into an object no matter what\n\n### `getAll([options])`\n\nGet all cookies\n\n- options (object):\n - doNotParse (boolean): do not convert the cookie into an object no matter what\n\n### `set(name, value, [options])`\n\nSet a cookie value\n\n- name (string): cookie name\n- value (string|object): save the value and stringify the object if needed\n- options (object): Support all the cookie options from RFC 6265\n - path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages\n - expires (Date): absolute expiration date for the cookie\n - maxAge (number): relative max age of the cookie from when the client receives it in seconds\n - domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)\n - secure (boolean): Is only accessible through HTTPS?\n - httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**\n - sameSite (boolean|none|lax|strict): Strict or Lax enforcement\n - partitioned (boolean): Indicates that the cookie should be stored using partitioned storage\n\n### `remove(name, [options])`\n\nRemove a cookie\n\n- name (string): cookie name\n- options (object): Support all the cookie options from RFC 6265\n - path (string): cookie path, use `/` as the path if you want your cookie to be accessible on all pages\n - expires (Date): absolute expiration date for the cookie\n - maxAge (number): relative max age of the cookie from when the client receives it in seconds\n - domain (string): domain for the cookie (sub.domain.com or .allsubdomains.com)\n - secure (boolean): Is only accessible through HTTPS?\n - httpOnly (boolean): Can only the server access the cookie? **Note: You cannot get or set httpOnly cookies from the browser, only the server.**\n - sameSite (boolean|none|lax|strict): Strict or Lax enforcement\n - partitioned (boolean): Indicates that the cookie should be stored using partitioned storage\n\n## Simple Example with React hooks\n\n```tsx\n// Root.tsx\nimport React from 'react';\nimport App from './App';\nimport { CookiesProvider } from 'react-cookie';\n\nexport default function Root(): React.ReactElement {\n return (\n \n \n \n );\n}\n```\n\n```tsx\n// App.tsx\nimport React from 'react';\nimport { useCookies } from 'react-cookie';\n\nimport NameForm from './NameForm';\n\ninterface CookieValues {\n name?: string;\n}\n\nfunction App(): React.ReactElement {\n const [cookies, setCookie] = useCookies<'name', CookieValues>(['name']);\n\n function onChange(newName: string): void {\n setCookie('name', newName);\n }\n\n return (\n
\n \n {cookies.name &&
Hello {cookies.name}!
}\n
\n );\n}\n\nexport default App;\n```\n\n## Simple Example with Higher-Order Component\n\n```tsx\n// Root.tsx\nimport React from 'react';\nimport App from './App';\nimport { CookiesProvider } from 'react-cookie';\n\nexport default function Root(): React.ReactElement {\n return (\n \n \n \n );\n}\n```\n\n```tsx\n// App.tsx\nimport React, { Component } from 'react';\nimport { withCookies, Cookies, ReactCookieProps } from 'react-cookie';\n\nimport NameForm from './NameForm';\n\ninterface State {\n name: string;\n}\n\ninterface Props extends ReactCookieProps {\n cookies: Cookies;\n}\n\nclass App extends Component {\n constructor(props: Props) {\n super(props);\n\n const { cookies } = props;\n this.state = {\n name: cookies.get('name') || 'Ben',\n };\n }\n\n handleNameChange(name: string): void {\n const { cookies } = this.props;\n\n cookies.set('name', name, { path: '/' });\n this.setState({ name });\n }\n\n render(): React.ReactNode {\n const { name } = this.state;\n\n return (\n
\n \n {this.state.name &&
Hello {this.state.name}!
}\n
\n );\n }\n}\n\nexport default withCookies(App);\n```\n\n## Server-Rendering Example\n\n```ts\n// src/components/App.ts\nimport React from 'react';\nimport { useCookies } from 'react-cookie';\n\nimport NameForm from './NameForm';\n\nfunction App() {\n const [cookies, setCookie] = useCookies(['name']);\n\n function onChange(newName: string) {\n setCookie('name', newName, { path: '/' });\n }\n\n return (\n
\n \n {cookies.name &&
Hello {cookies.name}!
}\n
\n );\n}\n\nexport default App;\n```\n\n```ts\n// src/server.ts\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { CookiesProvider } from 'react-cookie';\nimport { Request, Response } from 'express';\n\nimport Html from './components/Html';\nimport App from './components/App';\n\nexport default function middleware(req: Request, res: Response) {\n const markup = ReactDOMServer.renderToString(\n \n \n ,\n );\n\n const html = ReactDOMServer.renderToStaticMarkup();\n\n res.send('' + html);\n}\n```\n\n```ts\n// src/client.ts\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { CookiesProvider } from 'react-cookie';\n\nimport App from './components/App';\n\nconst root = createRoot(document.getElementById('main-app'));\n\nroot.render(\n \n \n ,\n);\n```\n\n```ts\n// server.ts\nimport express from 'express';\nimport serverMiddleware from './src/server';\nimport cookiesMiddleware from 'universal-cookie-express';\n\nconst app = express();\n\napp.use(cookiesMiddleware()).use(serverMiddleware);\n\napp.listen(8080, function () {\n console.log('Listening on 8080...');\n});\n```\n","readmeFilename":"README.md","users":{"jay.":true,"usex":true,"zvikyb":true,"dumbest":true,"kkho595":true,"tonda13":true,"alexchao":true,"c-zhavih":true,"niubenjs":true,"nraibaud":true,"vinbhatt":true,"alexcoady":true,"antixrist":true,"grin_zhou":true,"herlon214":true,"sternelee":true,"salvationz":true,"iaincollins":true,"markthethomas":true,"karzanosman984":true,"pengxiaohua2017":true,"rahulraghavankklm":true}}
![](\"https://badge.fury.io/js/react-cookie.svg\"){kind=icon}
\n ![\"Test](\"https://github.com/github/docs/actions/workflows/test.yml/badge.svg\"){kind=icon}
\n