8

React Cookies management with simple hooks

 3 years ago
source link: https://dev.to/pavankjadda/react-cookies-management-with-simple-hooks-3h5i
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 @ngxsmart/react-cookie-service

or

yarn add @ngxsmart/react-cookie-service
Enter fullscreen modeExit fullscreen mode

getAllCookies

Import the getAllCookies hook in to component. The getAllCookies hook returns all cookies of the website. See below

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

getCookie

Use getCookie cookie to get one specific cookie by name which returns cookie in string format

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

check

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 '@ngxsmart/react-cookie-service';
export default function Example() {
  const { check } = useCookies();
  return (
    <div>
      <h2>{JSON.stringify(check('test'))}</h2>
    </div>
  );
}
Enter fullscreen modeExit fullscreen mode

setCookie

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` */
Enter fullscreen modeExit fullscreen mode

Examples:
Set cookie with default options

setCookie('token', response.data.token);
setCookie('isLoggedIn', 'true');
Enter fullscreen modeExit fullscreen mode

Set a secure cookie that expires in 2 days

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

deleteCookie and deleteAllCookies

Delete cookies using deleteAllCookies hook and single cookie using deleteCookie

import React, { Component } from 'react';
import { useCookies } from '@ngxsmart/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>
  );
}
Enter fullscreen modeExit fullscreen mode

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK