diff --git a/packages/react-cookie/README.md b/packages/react-cookie/README.md index 5d32182..8125f9a 100644 --- a/packages/react-cookie/README.md +++ b/packages/react-cookie/README.md @@ -52,7 +52,7 @@ On the server, the `cookies` props must be set using `req.universalCookies` or ` - defaultSetOptions: You can set default values for when setting cookies. -## `useCookies([dependencies])` +## `useCookies([dependencies], [options])` Access and modify cookies using React hooks. @@ -66,6 +66,18 @@ const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']); Let 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. +### `options` (optional) + +- options (object): + - doNotParse (boolean): do not convert the cookie into an object no matter what + - doNotUpdate (boolean): do not update the cookies when the component mounts + +```jsx +const [cookies, setCookie, removeCookie] = useCookies(['cookie-name'], { + doNotParse: true, +}); +``` + ### `cookies` Javascript object with all your cookies. The key is the cookie name. diff --git a/packages/react-cookie/src/useCookies.tsx b/packages/react-cookie/src/useCookies.tsx index 7d7b64f..c1fe265 100644 --- a/packages/react-cookie/src/useCookies.tsx +++ b/packages/react-cookie/src/useCookies.tsx @@ -1,10 +1,11 @@ import { useContext, useLayoutEffect, useState, useRef, useMemo } from 'react'; -import { Cookie, CookieSetOptions } from 'universal-cookie'; +import { Cookie, CookieSetOptions, CookieGetOptions } from 'universal-cookie'; import CookiesContext from './CookiesContext'; import { isInBrowser } from './utils'; export default function useCookies( dependencies?: T[], + options?: CookieGetOptions, ): [ U, (name: T, value: Cookie, options?: CookieSetOptions) => void, @@ -15,17 +16,16 @@ export default function useCookies( if (!cookies) { throw new Error('Missing '); } + const defaultOptions = { doNotUpdate: true }; - const [allCookies, setCookies] = useState(() => - cookies.getAll({ doNotUpdate: true }), - ); + const getOptions: CookieGetOptions = { ...defaultOptions, ...options }; + + const [allCookies, setCookies] = useState(() => cookies.getAll(getOptions)); if (isInBrowser()) { useLayoutEffect(() => { function onChange() { - const newCookies = cookies.getAll({ - doNotUpdate: true, - }); + const newCookies = cookies.getAll(getOptions); if (shouldUpdate(dependencies || null, newCookies, allCookies)) { setCookies(newCookies);