useCookies

Category

@Integrations

Export Size

468 B

Package

@reause/integrations

Last Changed

5 days ago

Wrapper for universal-cookie.

Demo

Install

npm i universal-cookie@^8

Usage

Common usage

import { useCookies } from '@reause/integrations'

function Component() {
  const cookies = useCookies(['locale'])

  return (
    <div>
      <strong>locale</strong>
      :
      {cookies.get('locale')}
      <hr />
      <pre>{JSON.stringify(cookies.getAll())}</pre>
      <button onClick={() => cookies.set('locale', 'ru-RU')}>
        Russian
      </button>
      <button onClick={() => cookies.set('locale', 'en-US')}>
        English
      </button>
    </div>
  )
}

Options

Access and modify cookies using React hooks.

import { useCookies } from '@reause/integrations'

const {
  get,
  getAll,
  set,
  remove,
  addChangeListener,
  removeChangeListener,
} = useCookies(['cookie-name'], {
  doNotParse: false,
  autoUpdateDependencies: false,
})

dependencies (optional)

Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.

options (optional)

• doNotParse (boolean = false): do not convert the cookie into an object no matter what. Passed as default value to get/getAll methods.
• autoUpdateDependencies (boolean = false): automatically add cookie names ever provided to get method. If true then you don't need to care about provided dependencies.

cookies (optional)

Let you provide a universal-cookie instance (creates a new instance by default)

Info about methods available in the universal-cookie api docs

createCookies([req])

Create a universal-cookie instance using request (default is window.document.cookie) and returns useCookies function with provided universal-cookie instance

• req (object): Node's http.IncomingMessage request object

import { createCookies } from '@reause/integrations'

const useSsrCookies = createCookies({ headers: { cookie: 'locale=en-US' } })
const { get } = useSsrCookies(['locale'])
get('locale') // 'en-US'

Type Declarations

Toggle

export interface UseCookiesOptions {
    doNotParse?: boolean;
    autoUpdateDependencies?: boolean;
}

export interface UseCookiesReturn {
    get: <T = any>(name: string, options?: CookieGetOptions) => T;
    getAll: <T = any>(options?: CookieGetOptions) => T;
    set: (name: string, value: CookieValue, options?: CookieSetOptions) => void;
    remove: (name: string, options?: CookieSetOptions) => void;
    addChangeListener: (callback: CookieChangeListener) => void;
    removeChangeListener: (callback: CookieChangeListener) => void;
}

export interface CreateCookiesRequest {
    headers?: {
        cookie?: string | null;
    };
}

type CookieGetOptions = NonNullable<Parameters<Cookie['get']>[1]>

type CookieValue = Parameters<Cookie['set']>[1]

type CookieSetOptions = NonNullable<Parameters<Cookie['set']>[2]>

type CookieChangeListener = Parameters<Cookie['addChangeListener']>[0]

export function createCookies(req?: CreateCookiesRequest | string): (dependencies?: string[] | null, options?: UseCookiesOptions) => UseCookiesReturn

export function useCookies(dependencies?: string[] | null, { doNotParse = false, autoUpdateDependencies = false }?: UseCookiesOptions, cookies?: Cookie): UseCookiesReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

23b8e - fix(integrations): resolve useCookies audit findings (#799)

30916 - fix(test): stabilize flaky timing-sensitive browser tests

81320 - feat(integrations): add useCookies (#97)