or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-provider.mdcookie-management.mdhigher-order-component.mdindex.mdreact-hooks.md
tile.json

tessl/npm-react-cookie

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-cookie@8.0.x

To install, run

npx @tessl/cli install tessl/npm-react-cookie@8.0.0

index.mddocs/

React Cookie

React Cookie is a universal cookie management library for React applications that works seamlessly across both client-side and server-side rendering environments. It provides React hooks, higher-order components, and context providers for accessing and modifying cookies with full support for all standard cookie options from RFC 6265.

Package Information

  • Package Name: react-cookie
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-cookie

Core Imports

import { useCookies, CookiesProvider, withCookies, Cookies } from "react-cookie";

For CommonJS:

const { useCookies, CookiesProvider, withCookies, Cookies } = require("react-cookie");

Basic Usage

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

// Root component setup
function App() {
  return (
    <CookiesProvider defaultSetOptions={{ path: '/' }}>
      <UserComponent />
    </CookiesProvider>
  );
}

// Using cookies in components
function UserComponent() {
  const [cookies, setCookie, removeCookie] = useCookies(['username']);

  const handleLogin = (username: string) => {
    setCookie('username', username, { expires: new Date(Date.now() + 86400000) });
  };

  const handleLogout = () => {
    removeCookie('username');
  };

  return (
    <div>
      {cookies.username ? (
        <div>
          <p>Welcome, {cookies.username}!</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <button onClick={() => handleLogin('john_doe')}>Login</button>
      )}
    </div>
  );
}

Architecture

React Cookie is built around several key components:

  • Context System: Uses React Context to share cookie instances across components
  • Hook Interface: Modern useCookies hook for functional components with automatic re-rendering
  • HOC Pattern: withCookies higher-order component for class components
  • Universal Design: Works identically in client-side and server-side rendering environments
  • Type Safety: Full TypeScript support with generic type preservation

Capabilities

React Hooks Interface

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

function useCookies<T extends string, U = { [K in T]?: any }>(
  dependencies?: T[],
  options?: CookieGetOptions,
): [
  U,
  (name: T, value: Cookie, options?: CookieSetOptions) => void,
  (name: T, options?: CookieSetOptions) => void,
  () => void,
];

React Hooks

Context Provider

React context provider for sharing cookie instances across your application with optional default cookie settings.

const CookiesProvider: React.FC<ReactCookieProps>;

interface ReactCookieProps {
  cookies?: Cookies;
  defaultSetOptions?: CookieSetOptions;
  children?: React.ReactNode;
}

Context Provider

Higher-Order Component

Higher-order component pattern for injecting cookie functionality into class components or components that need cookie access via props.

function withCookies<T extends ReactCookieProps>(
  WrappedComponent: React.ComponentType<T>,
): React.ComponentType<Omit<T, keyof ReactCookieProps>>;

Higher-Order Component

Cookie Management

Direct cookie management through the Cookies class for advanced use cases and server-side integration.

class Cookies {
  get(name: string, options?: CookieGetOptions): any;
  get<T>(name: string, options?: CookieGetOptions): T;
  getAll(options?: CookieGetOptions): any;
  getAll<T>(options?: CookieGetOptions): T;
  set(name: string, value: Cookie, options?: CookieSetOptions): void;
  remove(name: string, options?: CookieSetOptions): void;
  addChangeListener(callback: CookieChangeListener): void;
  removeChangeListener(callback: CookieChangeListener): void;
  removeAllChangeListeners(): void;
  update(): void;
}

Cookie Management

Types

type Cookie = any;

interface CookieSetOptions {
  path?: string;
  expires?: Date;
  maxAge?: number;
  domain?: string;
  secure?: boolean;
  httpOnly?: boolean;
  sameSite?: boolean | 'none' | 'lax' | 'strict';
  partitioned?: boolean;
}

interface CookieGetOptions {
  doNotParse?: boolean;
  doNotUpdate?: boolean;
}

interface CookieChangeOptions {
  name: string;
  value?: any;
  options?: CookieSetOptions;
}

type CookieChangeListener = (options: CookieChangeOptions) => void;

interface ReactCookieProps {
  cookies?: Cookies;
  defaultSetOptions?: CookieSetOptions;
  allCookies?: { [name: string]: Cookie };
  children?: any;
  ref?: React.RefObject<{}>;
}