In this article, we are going to set and remove cookie in React.js. Let’s get started:

Table of Contents

1. Install Cookie Package & Config
2. Set Cookie
3. Access Cookie
4. Remove Cookie
5. Higher-Order Component

Install Cookie Package & Config

We’ll use react-cookie package. It’s very popular. Run the below command to install it:

npm install react-cookie

Now we have to import the CookiesProvider component from the react-cookie package and wrap your root app component with it.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CookiesProvider } from "react-cookie";

ReactDOM.render(
  <CookiesProvider>
    <App />
  </CookiesProvider>,
  document.getElementById('root')
);

Set Cookie

To set a cookie, we need to import the useCookies() hook from the react-cookie package.

import React from "react";
import { useCookies } from "react-cookie";

export default function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["user"]);

  function handleSetCookie() {
    setCookie("user", "obydul", { path: '/' });
  }

  return (
    <div className="App">
      <h1>React Cookie</h1>
      <button onClick={handleSetCookie}>Set Cookie</button>
    </div>
  );
}

The cookies object contains all cookies. The setCookie() method is used to set cookie.

We used path: "/" to access the cookie in all pages.

Access Cookie

We can retreive the user cookie uisng cookies.user. Here’s the example code:

import React from "react";
import { useCookies } from "react-cookie";

export default function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["user"]);

  function handleSetCookie() {
    setCookie("user", "obydul", { path: '/' });
  }

  return (
    <div className="App">
      <h1>React Cookie</h1>
      <p>{cookies.user}</p> {/* access user cookie */}
      <button onClick={handleSetCookie}>Set Cookie</button>
    </div>
  );
}

Remove Cookie

The removeCookie() method is used to remove cookie. Have a look at the example:

import React from "react";
import { useCookies } from "react-cookie";

export default function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["user"]);

  function handleSetCookie() {
    setCookie("user", "obydul", { path: '/' });
  }

  function handleRemoveCookie() {
    removeCookie("user");
  }

  return (
    <div className="App">
      <h1>React Cookie</h1>
      <p>{cookies.user}</p> {/* access user cookie */}
      <button onClick={handleSetCookie}>Set Cookie</button>
      <button onClick={handleRemoveCookie}>Remove Cookie</button>
    </div>
  );
}

Higher-Order Component

To set and get cookies in class-based components, we need to use withCookies(). Let’s take a look:

import React, { Component } from "react";
import { instanceOf } from "prop-types";
import { withCookies, Cookies } from "react-cookie";

class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  state = {
    user: this.props.cookies.get("user") || ""
  };

  handleSetCookie = () => {
    const { cookies } = this.props;
    cookies.set("user", "obydul", { path: "/" }); // set the cookie
    this.setState({ user: cookies.get("user") });
  };

  handleRemoveCookie = () => {
    const { cookies } = this.props;
    cookies.remove("user"); // remove the cookie
    this.setState({ user: cookies.get("user") });
  };

  render() {
    const { user } = this.state;
    return (
      <div className="App">
        <h1>React Cookie</h1>
        <p>{user}</p> {/* access the cookie */}
        <button onClick={this.handleSetCookie}>Set Cookie</button>
      <button onClick={this.handleRemoveCookie}>Remove Cookie</button>
      </div>
    );
  }
}

export default withCookies(App);