useCookie

Simple hook to manage browser cookies.

🍪

Cookie Manager

Current Value

No cookie found

Update Cookie

Usage

import { useCookie } from 'usehooks-ts'
 
export default function Component() {
  const [value, updateCookie, deleteCookie] = useCookie('token')
 
  const login = () => {
    updateCookie('123456')
  }
 
  const logout = () => {
    deleteCookie()
  }
 
  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={login}>Login</button>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

API

const [value, updateCookie, deleteCookie] = useCookie(name, defaultValue?)

Parameters

Name	Type	Default	Description
`name`	`string`	-	The name of the cookie key
`defaultValue`	`string`	`''`	Default value if cookie doesn't exist

Return Values

Name	Type	Description
`value`	`string \| undefined`	Current cookie value
`updateCookie`	`(newValue: string, options?: CookieAttributes) => void`	Function to set the cookie value
`deleteCookie`	`() => void`	Function to remove the cookie

Hook

import { useState, useCallback } from 'react'
import Cookies from 'js-cookie'
 
export function useCookie(
  name: string,
  defaultValue: string = '',
) {
  const [value, setValue] = useState<string | undefined>(() => {
    const cookie = Cookies.get(name)
    if (cookie) return cookie
    Cookies.set(name, defaultValue)
    return defaultValue
  })
 
  const updateCookie = useCallback(
    (newValue: string, options?: Cookies.CookieAttributes) => {
      Cookies.set(name, newValue, options)
      setValue(newValue)
    },
    [name],
  )
 
  const deleteCookie = useCallback(() => {
    Cookies.remove(name)
    setValue(undefined)
  }, [name])
 
  return [value, updateCookie, deleteCookie] as const
}