use-cookie-state
v2.1.0
Published
State management React hook using browser cookies as persistent storage
Downloads
3,029
Maintainers
Readme
use-cookie-state
Simple React persistent state management hook, based on browser cookies
Dev.to article on writing this library
Features
- Persist your state with browser cookies
- Based on cookie package
- Supports parse/serialize options
- Supports Server Side Rendering - behaves like a
useState
if browser cookies is inaccessible
📦 Installation
with npm
$ npm install --save use-cookie-state cookie
with yarn
$ yarn add use-cookie-state cookie
🕹 API
🔗 useCookieState
Options
- key - used as cookie name
- value - initial value, any value or object or function with returns initial hook value
- options (optional)
Default encode options
If no encode options are passed, the default encode options will be used.
{ path: "/", expires: new Date("9999") }
Otherwise, the passed encode options will be merged with the default encode options.
useCookieState(
key: string;
value: any;
options?: {
decode?: cookie.CookieParseOptions,
encode?: cookie.CookieSerializeOptions // = { path: "/", expires: new Date("9999") }
};
)
Returns
- value - current cookie value
- setValue - callback to update cookie value
[
value: T,
setValue(value: T, encode? cookie.CookieSerializeOptions)
]
📖 Examples
useCookieState
behaves like React.useState
hook, just put the cookie key as the first argument and the value or function or object or anything else as the second arg.
The state will be persistent between rerenders and page reloads.
Don't worry about serializing or parsing the state value it just works out of the box!
With simple object and default options
import React from "react";
import { useCookieState } from "use-cookie-state";
function MyComponent() {
const [state, setState] = useCookieState("mykey", { foo: "bar" })
return <div>Current state: {state}</div>
}
export default MyComponent
With custom options and function as initial arg
import React from "react";
import { useCookieState } from "use-cookie-state";
const getCookiesInitialValue = () => {
return "my initial value"
}
function MyComponent() {
const [state, setState] = useCookieState("mykey", getCookiesInitialValue, {
encode: {
httpOnly: true,
maxAge: 60 * 60 * 24 * 7 // 1 week
}
})
const handleUpdate = () => {
setState(
"next cookie value",
{ encode: { domain: "example.com"} } // update value fn also accepts custom encode options
)
}
return (
<div>
<div>Current state: {state}</div>
<button onClick={handleUpdate}>Update current state</button>
</div>
)
}
export default MyComponent
License
MIT © dqunbp