This blog post explains the process to maintain cookies in React application using simple hooks from react-cookie-service library

react-cookie-service is a simple react library with 5 hooks that helps to read, set, and delete cookies

1. check
2. getCookie
3. getAllCookies
4. setCookie
5. deleteCookie
6. deleteAllCookies

Usage

Install the library using npm or yarn command

npm install --save @js-smart/react-cookie-serviceoryarn add @js-smart/react-cookie-service

1. Then import the getAllCookies hook to component. The getAllCookies hook returns all cookies of the website. See below

import React, { Component } from 'react';
import { useCookies } from '@js-smart/react-cookie-service';export default function Example() {
  const { getAllCookies } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(getAllCookies)}</h2>
    </div>
  );
}

2. To get one specific cookie by name, use getCookie hook. Which returns cookie in string format

import React, { Component } from 'react';
import { useCookies } from '@js-smart/react-cookie-service';export default function Example() {
  const { getCookie } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(getCookie('test'))}</h2>
    </div>
  );
}

3. Use check hook to see if the specified cookie exists. If exists check hook returns true other returns false

import React, { Component } from 'react';
import { useCookies } from '@js-smart/react-cookie-service';export default function Example() {
  const { check } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(check('test'))}</h2>
    </div>
  );
}

4. Use setCookie hook to set cookie. setCookie accepts the following arguments. Only the name and value are mandatory and rest of them are optional.

name: string,    
value: string,    expiresOrOptions?: number | Date | any,   
/* Number of days until the cookies expires or an actual `Date`  */path?: string,
/* Cookie path. Defaults to '/' */domain?: string,    
/* Cookie domain. Defaults to website domain */secure?: boolean,    
/* defaults to false */sameSite?: 'Lax' | 'None' | 'Strict' 
/* Defaults to `Lax` */

Examples:

Set cookie with default options

setCookie('token', response.data.token);
setCookie('isLoggedIn', 'true');

Set a secure cookie that expires in 2 days

setCookie('token', response.data.token,{ expires: 2, domain: '/', secure: true, sameSite: 'Lax' } );

5. Delete cookies using deleteAllCookies hook and single cookie using deleteCookie

import React, { Component } from 'react';
import { useCookies } from '@js-smart/react-cookie-service';export default function Example() {
  const { deleteCookie, deleteAllCookies } = useCookies();useEffect(()=>{setCookie('token', response.data.token);setCookie('isLoggedIn', 'true');deleteCookie('token');deleteAllCookies();},[]);  return (
    <div>
      <h2>Delete All Cookies</h2>
    </div>
  );
}

The source code for this library can be found in Github. Happy coding