tessl/npm-react-cookie

Universal cookies for React that work seamlessly across client-side and server-side rendering environments

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

React Hooks

Name: tessl/npm-react-cookie
Author: tessl

Modern React hooks interface for accessing and modifying cookies in functional components with automatic re-rendering on cookie changes.

Capabilities

useCookies Hook

Hook for accessing and modifying cookies with automatic component re-rendering when specified cookies change.

/**
 * Hook for accessing and modifying cookies
 * @param dependencies - Optional array of cookie names to watch for changes
 * @param options - Optional configuration for cookie retrieval
 * @returns Tuple containing [cookies, setCookie, removeCookie, updateCookies]
 */
function useCookies<T extends string, U = { [K in T]?: any }>(
  dependencies?: T[],
  options?: CookieGetOptions,
): [
  U, // cookies object
  (name: T, value: Cookie, options?: CookieSetOptions) => void, // setCookie
  (name: T, options?: CookieSetOptions) => void, // removeCookie
  () => void, // updateCookies
];

Parameters:

dependencies (optional): Array of cookie names that trigger re-renders when changed. If omitted, component re-renders on any cookie change.
options (optional): Configuration options for cookie retrieval.

Returns:

[0] cookies: Object containing current cookie values, keyed by cookie name
[1] setCookie: Function to set a cookie value
[2] removeCookie: Function to remove a cookie
[3] updateCookies: Function to manually refresh cookies from browser

Usage Examples:

import React from 'react';
import { useCookies } from 'react-cookie';

// Basic usage - watch all cookies
function BasicExample() {
  const [cookies, setCookie, removeCookie] = useCookies();
  
  return (
    <div>
      <p>All cookies: {JSON.stringify(cookies)}</p>
      <button onClick={() => setCookie('test', 'value')}>Set Cookie</button>
      <button onClick={() => removeCookie('test')}>Remove Cookie</button>
    </div>
  );
}

// Dependency-based usage - only re-render for specific cookies
function DependencyExample() {
  const [cookies, setCookie, removeCookie] = useCookies(['username', 'theme']);
  
  return (
    <div>
      <p>Username: {cookies.username}</p>
      <p>Theme: {cookies.theme}</p>
      <button onClick={() => setCookie('username', 'john')}>Set Username</button>
      <button onClick={() => setCookie('irrelevant', 'data')}>
        Set Irrelevant Cookie (won't trigger re-render)
      </button>
    </div>
  );
}

// With type safety
interface UserCookies {
  username?: string;
  userId?: string;
  preferences?: object;
}

function TypedExample() {
  const [cookies, setCookie, removeCookie] = useCookies<keyof UserCookies, UserCookies>(
    ['username', 'userId', 'preferences']
  );
  
  // cookies is now typed as UserCookies
  const username: string | undefined = cookies.username;
  
  const handleSetPreferences = () => {
    setCookie('preferences', { theme: 'dark', language: 'en' });
  };
  
  return <div>{/* component JSX */}</div>;
}

// With cookie options
function OptionsExample() {
  const [cookies, setCookie, removeCookie] = useCookies(['session'], {
    doNotParse: true // Always return raw string values
  });
  
  const handleSetSession = () => {
    setCookie('session', 'abc123', {
      expires: new Date(Date.now() + 86400000), // 24 hours
      secure: true,
      httpOnly: false,
      sameSite: 'strict',
      path: '/'
    });
  };
  
  return <div>{/* component JSX */}</div>;
}

setCookie Function

Function returned by useCookies to set cookie values with optional configuration.

/**
 * Set a cookie value with optional configuration
 * @param name - Cookie name 
 * @param value - Cookie value (string or object, objects are JSON-stringified)
 * @param options - Cookie configuration options
 */
(name: T, value: Cookie, options?: CookieSetOptions) => void;

removeCookie Function

Function returned by useCookies to remove cookies.

/**
 * Remove a cookie
 * @param name - Cookie name to remove
 * @param options - Cookie options (must match path/domain used when setting)
 */
(name: T, options?: CookieSetOptions) => void;

updateCookies Function

Function returned by useCookies to manually refresh cookies from the browser.

/**
 * Manually refresh cookies from browser storage
 * Typically not needed as the library automatically detects changes
 */
() => void;

Hook Options

interface CookieGetOptions {
  /** Do not parse cookie values as JSON objects, return raw strings */
  doNotParse?: boolean;
  /** Do not update cookies when component mounts */
  doNotUpdate?: boolean;
}

Usage with options:

const [cookies, setCookie, removeCookie] = useCookies(['data'], {
  doNotParse: true,    // Always return string values, never parse JSON
  doNotUpdate: false   // Update cookies on component mount (default behavior)
});

Install with Tessl CLI