use-cookie (use-cookie)

Manages cookies with declarative methods.

v0.1.0

Usage

import { use-cookie } from "@/hooks"

"use client";

import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";

import { useCookie } from "@/components/hooks/use-cookie";

export function UseCookieDemo() {
  // useCookie hook for a demo cookie
  const [cookieValue, setCookie, removeCookie] = useCookie<string>(
    "demo-cookie",
    "hermione"
  );
  const [input, setInput] = useState("");

  // Handle setting the cookie
  const handleSet = () => {
    setCookie(input, { path: "/" });
  };

  // Handle removing the cookie
  const handleRemove = () => {
    removeCookie();
    setInput("");
  };

  return (
    <Card className="relative max-w-sm w-full">
      <CardHeader>
        <CardTitle>useCookie</CardTitle>
        <CardDescription>
          This component uses the <code>useCookie</code> hook to manage a
          cookie.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter cookie value"
        />
        <pre className="text-sm text-muted-foreground bg-accent w-fit px-1 py-0.5 rounded-xs">
          {cookieValue}
        </pre>
      </CardContent>
      <CardFooter className="flex gap-2">
        <Button onClick={handleSet} variant="secondary">
          Set Cookie
        </Button>
        <Button onClick={handleRemove} variant="destructive">
          Remove Cookie
        </Button>
      </CardFooter>
    </Card>
    // <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200">
    //   <h2 className="text-2xl font-bold mb-4 text-gray-800">useCookie Demo</h2>
    //   <div className="mb-4">
    //     <label className="block text-gray-700 mb-1">
    //       Current cookie value:
    //     </label>
    //     <div className="p-2 bg-gray-100 rounded text-gray-900 min-h-[2rem]">
    //       {cookieValue !== undefined ? (
    //         cookieValue
    //       ) : (
    //         <span className="italic text-gray-400">(no value)</span>
    //       )}
    //     </div>
    //   </div>
    //   <div className="mb-4">
    //     <label htmlFor="cookie-input" className="block text-gray-700 mb-1">
    //       Set new value:
    //     </label>
    //     <input
    //       id="cookie-input"
    //       type="text"
    //       value={input}
    //       onChange={(e) => setInput(e.target.value)}
    //       className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
    //       placeholder="Enter cookie value"
    //     />
    //   </div>
    //   <div className="flex gap-2">
    //     <button
    //       onClick={handleSet}
    //       className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
    //     >
    //       Set Cookie
    //     </button>
    //     <button
    //       onClick={handleRemove}
    //       className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
    //     >
    //       Remove Cookie
    //     </button>
    //   </div>
    // </div>
  );
}

Install

npx wkkkis-hooks add use-cookie

Options

Name	Type	Default	Description
key	string	-	The key to store the value in cookie
initialValue	string	-	The initial value to store in cookie
options?	CookieOptions	-	The options for the hook
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

Type Safety & Serialization

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.

Cookie Removal

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

Error Handling

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

SSR & 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.

Best Practices & Caveats

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.

Files in this hook

Source	Destination
files/use-cookie.ts	src/hooks/use-cookie.ts