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

Context Provider

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

React context provider for sharing cookie instances across your application with optional default cookie settings and server-side rendering support.

Capabilities

CookiesProvider Component

React context provider that makes cookie functionality available to child components via the useCookies hook or withCookies HOC.

/**
 * Context provider for cookie functionality
 * Must wrap components that use useCookies hook or withCookies HOC
 */
const CookiesProvider: React.FC<ReactCookieProps>;

interface ReactCookieProps {
  /** Optional pre-configured Cookies instance (required for SSR) */
  cookies?: Cookies;
  /** Optional default options applied to all setCookie calls */
  defaultSetOptions?: CookieSetOptions;
  /** React children components */
  children?: any;
}

Props:

cookies (optional): Pre-configured Cookies instance. Required for server-side rendering to pass request cookies.
defaultSetOptions (optional): Default cookie options applied to all setCookie calls within the provider context.
children: React components that will have access to cookie functionality.

Usage Examples:

import React from 'react';
import { CookiesProvider } from 'react-cookie';
import App from './App';

// Basic client-side usage
function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

// With default cookie options
function RootWithDefaults() {
  return (
    <CookiesProvider 
      defaultSetOptions={{ 
        path: '/', 
        secure: true, 
        sameSite: 'strict' 
      }}
    >
      <App />
    </CookiesProvider>
  );
}

// Server-side rendering usage
import { Request, Response } from 'express';
import ReactDOMServer from 'react-dom/server';
import { CookiesProvider } from 'react-cookie';

function serverMiddleware(req: Request, res: Response) {
  const markup = ReactDOMServer.renderToString(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );
  
  res.send(`<!DOCTYPE html><html><body>${markup}</body></html>`);
}

// Client hydration (browser)
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <CookiesProvider>
    <App />
  </CookiesProvider>
);

Default Set Options

Configure default cookie options that are applied to all setCookie calls within the provider context.

interface CookieSetOptions {
  /** Cookie path */
  path?: string;
  /** Expiration date */
  expires?: Date;
  /** Max age in seconds */
  maxAge?: number;
  /** Cookie domain */
  domain?: string;
  /** HTTPS only flag */
  secure?: boolean;
  /** Server access only flag */
  httpOnly?: boolean;
  /** SameSite policy */
  sameSite?: boolean | 'none' | 'lax' | 'strict';
  /** Partitioned storage flag */
  partitioned?: boolean;
}

Usage with defaults:

// Provider with default options
<CookiesProvider defaultSetOptions={{ path: '/', secure: true, maxAge: 3600 }}>
  <App />
</CookiesProvider>

// Inside App component - these options are automatically applied
function App() {
  const [cookies, setCookie] = useCookies();
  
  // This will use path: '/', secure: true, maxAge: 3600 by default
  setCookie('username', 'john');
  
  // You can still override defaults per cookie
  setCookie('temporary', 'data', { maxAge: 300 }); // 5 minutes instead of 1 hour
  
  return <div>App content</div>;
}

Server-Side Rendering Setup

Complete setup for universal (isomorphic) React applications with server-side rendering.

Server setup:

// server.ts
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import cookiesMiddleware from 'universal-cookie-express';
import { CookiesProvider } from 'react-cookie';
import App from './components/App';

const server = express();

// Apply universal-cookie-express middleware
server.use(cookiesMiddleware());

server.get('*', (req, res) => {
  // req.universalCookies is provided by universal-cookie-express
  const markup = ReactDOMServer.renderToString(
    <CookiesProvider cookies={req.universalCookies}>
      <App />
    </CookiesProvider>
  );
  
  const html = `
    <!DOCTYPE html>
    <html>
      <head><title>My App</title></head>
      <body>
        <div id="root">${markup}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `;
  
  res.send(html);
});

server.listen(3000);

Client setup:

// client.ts
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { CookiesProvider } from 'react-cookie';
import App from './components/App';

// Client-side hydration
const container = document.getElementById('root');
hydrateRoot(
  container,
  <CookiesProvider>
    <App />
  </CookiesProvider>
);

Error Handling

The provider automatically handles common error scenarios:

// Missing CookiesProvider error
function ComponentWithoutProvider() {
  // This will throw: "Missing <CookiesProvider>"
  const [cookies] = useCookies();
  return <div>{cookies.test}</div>;
}

// Proper usage
<CookiesProvider>
  <ComponentWithoutProvider /> {/* Now works correctly */}
</CookiesProvider>

Install with Tessl CLI