How to add Cookie Notice Banner to React app 👨‍💻

Nowdays almost every website you visit for the first time displays a banner, stating something like "you must agree to use of cookies in order to continue using the website". Even though these are most of the time just annoying, if you have a website that uses cookies, you pretty much need to have this on your site too.

In this blog post I want to show you how to easily and quickly add this "cookie consent banner" to your own React application. I used this same way when I added cookie notice banner to my own website.

Read more on How I converted my website from Wordpress to Jamstack.

react-cookie-consent

There is no need to re-invent the wheel. We can use npm package react-cookie-consent to do most of the heavy lifting for us.

So to get started open up your React app and install react-cookie-consent.

1npm install react-cookie-consent

Next we need to import CookieConesnt component from react-cookie-consent. Add the following code to your component.

1import CookieConsent from "react-cookie-consent";

Then add the actual component to your render method.

1<CookieConsent>This site uses cookies.</CookieConsent>

The CookieConsent component accepts debug prop. When we are in development, we can set this true and this way the banner will be displayed every time you refresh the site. Just remember to remove it when you are done developing and about to ship your code to production.

1<CookieConsent debug={true}>This site uses cookies.</CookieConsent>

Now when you save and refresh your application, you should see a banner at the bottom of your page with the text "This site uses cookies." and an "I understand" button.

Here is the full code for my component (I used the default App component from create-react-app as a starting point).

1import logo from "./logo.svg";
2import "./App.css";
3import CookieConsent from "react-cookie-consent";
4
5function App() {
6  return (
7    <div className="App">
8      <header className="App-header">
9        <img src={logo} className="App-logo" alt="logo" />
10        <p>
11          Edit <code>src/App.js</code> and save to reload.
12        </p>
13        <a
14          className="App-link"
15          href="https://reactjs.org"
16          target="_blank"
17          rel="noopener noreferrer"
18        >
19          Learn React
20        </a>
21      </header>
22      <CookieConsent debug={true}>This site uses cookies.</CookieConsent>
23    </div>
24  );
25}
26
27export default App;

Final thoughts

That's how easy it is to add a cookie consent / notice banner to your React application. I wanted to keep this blog post short and simple so I just showed you the bare minimum to get the banner up and running.

If you wish to learn how you can customise it even further e.g. add links, change colors, fonts, button text etc. I created a video where I go a bit more in depth on how to use the react-cookie-consent cookie banner.

Watch the video here.