DEV Community

Hammed Oyedele
Hammed Oyedele

Posted on

Manage Browser Cookies with React Hooks

Browser Cookies

So this week, I created my first NPM package and my first custom React Hooks!!!

GitHub logo devhammed / use-cookie

Get, Set, Update and Delete Cookie using React Hooks.

@devhammed/use-cookie

Get, Set, Update and Delete Cookie using React Hooks.

NPM JavaScript Style Guide Made in Nigeria

Install

npm install --save @devhammed/use-cookie
Enter fullscreen mode Exit fullscreen mode

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import useCookie from '@devhammed/use-cookie'
const App = () => {
  const [username, setUsername, deleteUsername] = useCookie('username', 'User')
  return (
    <section>
      <h1>Hello {username}!</h1>
      <p>Edit below input, Your name will be stored in a cookie. you can refresh this page to see how it persists.</p>
      <input
        type='text'
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button
        onClick={() => deleteUsername()}
      >
        Delete Cookie
      </button>
    </section>
  )
}

ReactDOM.
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

Want to you manage HTTP Cookies using React???
I created useCookie() React Hook, you can use it to Get, Set, Update and Delete Cookies in your functional components.

Demo: https://devhammed.github.io/use-cookie
NPM: https://www.npmjs.com/package/@devhammed/use-cookie

Discussion (0)