useCookie

Manages cookies with declarative methods.

useCookie

This component uses the useCookie hook to manage a cookie.

hermione

Installation

Prop	Type	Default	Description
`key`	`string`	-	The key to store the value in cookie
`initialValue`	`any`	-	The initial value to store in cookie
`options?`	`CookieOptions`	-	The options for the hook

Prop	Type	Default	Description
`path`	`string`	`/`	The path of the cookie
`expires`	`Date`	`null`	The expiration date of the cookie
`maxAge`	`number`	`null`	The maximum age of the cookie
`domain`	`string`	`null`	The domain of the cookie
`secure`	`boolean`	`false`	Whether the cookie is secure
`sameSite`	`string`	`null`	The same-site attribute of the cookie

The hook supports any serializable value (strings, objects, etc.).
Non-string values are automatically serialized to JSON when setting the cookie and deserialized when reading.

The removeCookie function deletes the cookie by setting its expiration date to the past.

If reading or writing the cookie fails, the hook logs a warning and falls back to the initial value.

On the server, the hook always returns the initial value and does not interact with cookies.
The initial value is only used if the cookie does not exist.

The hook is client-side only; on the server, it does not interact with cookies.
Avoid storing sensitive data in cookies.
Changing the key will re-read and update the value from the cookie.
For best performance, avoid creating new initialValue or options on every render (use useMemo if needed).
Some cookie options (e.g., secure, sameSite) may be required for cross-site or secure contexts.

const [value, setCookie, removeCookie] = useCookie('my-key', 'default');
setCookie('new value');
removeCookie();

const [user, setUser, removeUser] = useCookie('user', { name: 'Alice' });
setUser({ name: 'Bob' });

setCookie('value', { path: '/', maxAge: 3600, sameSite: 'lax' });