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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Cookie

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

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<{}>;
}