DOCSEARCHbyAlgolia
Submit Docs

universal-cookie

repository·main·Indexed 42 days ago

https://github.com/itsbencodes/cookies

A collection of libraries for universal cookie management across JavaScript environments. Includes universal-cookie for general-purpose use, react-cookie (v8.1.2) for React applications via hooks and HOCs, and middleware for Express (universal-cookie-express) and Koa (universal-cookie-koa) to support server-side rendering (SSR).

Tokens
7.8K
Snippets
31
Records
38
Agent score
52%

What's inside universal-cookie

  2. Use universal-cookie-koa for Koa server-side rendering

    main
    Use universal-cookie-koa to enable cookie getting and setting on Koa servers. This is specifically designed to support server-side rendering (SSR) workflows where cookies need to be accessible during the request lifecycle on Koa.

  3. Use universal-cookie-express for Express server-side rendering

    main
    Use universal-cookie-express to enable cookie getting and setting on Express servers. This is specifically designed to support server-side rendering (SSR) workflows where cookies need to be accessible during the request lifecycle on Express.

  7. Run the react-cookie and universal-cookie-express demo

    main

    To run the demo project, which showcases the usage of react-cookie and universal-cookie-express, you must first prepare the monorepo environment from the root directory before starting the demo server.

    1. Prepare the monorepo

    From the root directory of the repository, run:

    • lerna bootstrap to link dependencies.
    • npm run build to build the necessary packages.

    2. Start the demo

    Navigate to the demo directory and run:

    • npm start to launch the demo server with server-rendering enabled.
    # In root directory
lerna bootstrap
npm run build

# In demo directory
npm start

  8. Implement Server-Side Rendering with react-cookie

    main

    To support SSR (e.g., with Express), you must bridge the server's request cookies to the React application using universal-cookie-express and the CookiesProvider's cookies prop.

    1. Use universal-cookie-express middleware in your Express app to populate req.universalCookies.
    2. In your server rendering logic, pass req.universalCookies to <CookiesProvider cookies={req.universalCookies}>.
    3. On the client, initialize <CookiesProvider> normally.
    // server.ts
import express from 'express';
import serverMiddleware from './src/server';
import cookiesMiddleware from 'universal-cookie-express';

const app = express();

// Use the middleware to populate req.universalCookies
app.use(cookiesMiddleware()).use(serverMiddleware);

app.listen(8080);

// src/server.ts
// Inside your middleware function:
const markup = ReactDOMServer.renderToString(
  <CookiesProvider cookies={req.universalCookies}>
    <App />
  </CookiesProvider>
);

  10. Install universal-cookie

    main

    You can install universal-cookie via npm:

    npm install universal-cookie

    Alternatively, you can use it in the browser via a <script> tag using the UMD build:

    <script
  crossorigin
  src="https://unpkg.com/universal-cookie@7/umd/universalCookie.min.js"
></script>

    When using the script tag, the library is available via the global variable UniversalCookie.

    npm install universal-cookie

  11. Set and remove cookies with set() and remove()

    main

    Use set() to create or update a cookie and remove() to delete one.

    set(name, value, [options])

    • name (string): Cookie name.
    • value (string|object): The value to store. If an object is provided, it will be stringified.
    • options (object): Supports all RFC 6265 options (path, expires, maxAge, domain, secure, httpOnly, sameSite, partitioned).

    remove(name, [options])

    • name (string): Cookie name.
    • options (object): Supports all RFC 6265 options. Note that the path and domain must match the original cookie to successfully remove it.
    import Cookies from 'universal-cookie';
const cookies = new Cookies({ path: '/' });

// Set a cookie
cookies.set('myCat', 'Pacman');

// Set an object
cookies.set('user', { id: 1, name: 'Ben' });

// Remove a cookie
cookies.remove('myCat');

  12. Get cookie values with get() and getAll()

    main

    Use get() to retrieve a specific cookie by name, or getAll() to retrieve all available cookies.

    get(name, [options])

    • name (string): The name of the cookie.
    • options.doNotParse (boolean): If true, the value is returned as a raw string without attempting to parse it as an object.

    getAll([options])

    • options.doNotParse (boolean): If true, cookies are returned as raw strings without object parsing.
    import Cookies from 'universal-cookie';
const cookies = new Cookies();

const value = cookies.get('myCat');
const allCookies = cookies.getAll();