---
title: Building a tracking cookies consent banner in React
sidebar: Docs
showTitle: true
featuredTutorial: false
date: 2025-08-27
author:
  - ian-vanagas
  - robbie-coomber
tags:
  - configuration
  - product os
---

If you’ve spent any time online, you’ve seen a cookie consent banner. Because of GDPR and other worldwide internet privacy regulations, most sites need to get consent to track users and use cookies. 

To help you stay compliant, PostHog enables you to track users either with or without cookies. In this tutorial, we are going to build a simple banner with React, JavaScript, and HTML for users to opt in or out of PostHog’s cookies.

To complete this tutorial, you’ll need to a [PostHog instance](https://us.posthog.com/signup) as well as [Node installed](https://nodejs.org/en/download/) (to install, manage, and run React).

## Step 1: Setting up React

This tutorial is for React, but it works for other JavaScript frameworks as well (we have specific tutorials for [Next.js](/tutorials/nextjs-cookie-banner) and [Vue](/tutorials/vue-cookie-banner)).

We'll set up our React app with [Vite](https://vitejs.dev/guide/). To do this, head into the command line, then create and install the app (we name ours `react-cookie-banner`).

```bash
npm create vite@latest react-cookie-consent -- --template react
cd react-cookie-consent
npm install
npm run dev
```

Running these commands gives us a working React app.

![React app](https://res.cloudinary.com/dmukukwp6/image/upload/react_7ecc5ce58c.png)

## Step 2: Setting up PostHog

Next, we want to set up PostHog to track activity on our site. To do this, first, we'll install the `posthog-js` and `@posthog/react` packages.

```bash
npm install --save posthog-js @posthog/react
```

Next, we’ll go to `src/main.jsx` to initialize PostHog. We’ll import PostHog and the `PostHogProvider` component from `@posthog/react` and run `posthog.init` with our project key and instance address (which you can get in your [project settings](https://us.posthog.com/settings/project))

```js file=main.jsx
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import posthog from 'posthog-js'
import { PostHogProvider } from '@posthog/react'

posthog.init("<ph_project_api_key>", {
  api_host: "<ph_client_api_host>",
  defaults: "<ph_posthog_js_defaults>"
})


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PostHogProvider client={posthog}>
      <App />
    </PostHogProvider>
  </React.StrictMode>,
)
```

Once done, visit your site running locally, click the button, and you should start seeing events in your [PostHog activity tab](https://us.posthog.com/activity/explore).

<ProductScreenshot
  imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_10_at_14_54_53_2x_de2d28eea9.png" 
  imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_10_at_14_54_41_2x_13e7233065.png"
  alt="Events in PostHog" 
  classes="rounded"
/>

When we head back to our local site, right-click, choose inspect, go to the Application tab, and check cookies, you’ll see we’ve created a tracking cookie with details about PostHog and the user. 

![App cookie](https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_10_at_14_59_04_2x_19bbe1f339.png)

## Step 3: Ensuring cookies aren't set on initial load

To start making this more compliant, we want to ensure we don't store any cookies until the user opts in. 

To do this, we set `cookieless_mode` to `on_reject` in our initialization config like this:

```js focusOnLines=8-12
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import posthog from 'posthog-js'
import { PostHogProvider } from '@posthog/react'

posthog.init("<ph_project_api_key>", {
  api_host: "<ph_client_api_host>",
  defaults: "<ph_posthog_js_defaults>",
  cookieless_mode: 'on_reject'
})


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PostHogProvider client={posthog}>
      <App />
    </PostHogProvider>
  </React.StrictMode>,
)
```

This means that PostHog will not set any cookies until the user has given consent, which is what we rely on the cookie banner to do.

## Step 4: Building the banner component

Now that we have our site and PostHog set up, it is time to create the banner. To start, we can create a `Banner.jsx` file in our `src` folder (where the rest of our React code is).

```bash
cd src
touch Banner.jsx
```

In the `Banner.jsx` file, we create a basic React component with a blurb about cookies. We also add accept and decline buttons connected to the `handleAcceptCookies` and `handleDeclineCookies` functions (that just log to the console for now).

```js
// Banner.jsx

export function Banner() {

  const handleAcceptCookies = () => {
    console.log('Accept cookies')
  }

  const handleDeclineCookies = () => {
    console.log('Decline cookies')
  }

  return (
    <div>
      <div>
        <p>
          We use tracking cookies to understand how you use 
          the product and help us improve it.
          Please accept cookies to help us improve.
        </p>
        <button type="button" onClick={handleAcceptCookies}>Accept cookies</button>
        <span> </span>
        <button type="button" onClick={handleDeclineCookies}>Decline cookies</button>
      </div>
    </div>
  )
}
```

We’ll then add the new `Banner` component into `main.jsx`.

```js
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { PostHogProvider } from '@posthog/react'
import posthog from 'posthog-js'
import { Banner } from './Banner'

posthog.init("<ph_project_api_key>", {
  api_host: "<ph_client_api_host>",
  defaults: "<ph_posthog_js_defaults>",
  cookieless_mode: 'on_reject',
})


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PostHogProvider client={posthog}>
      <App />
      <Banner />
    </PostHogProvider>
  </React.StrictMode>,
)

```

When we head back to the local site, we’ll see our cookie banner at the bottom of the site. 

![Tutorial banner](https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2024_07_10_at_15_22_59_2x_33295f3f01.png)

## Step 5: Setting and storing consent

Next, we’ll add the logic for setting and storing the user's consent. Back in our `Banner.jsx` file, we:

1. Add a `consentGiven` state to track the user's consent decision and connect it to PostHog's consent status.
2. Make our `handleAcceptCookies` and `handleDeclineCookies` functions opt users in or out of tracking cookies using PostHog's consent management methods.
3. Conditionally show our banner depending whether that decision has been made.

Together, this looks like this:

```js
// src/Banner.jsx
import { useState } from "react";
import { usePostHog } from '@posthog/react'

export function Banner() {
  const posthog = usePostHog();
  const [consentGiven, setConsentGiven] = useState(posthog.get_explicit_consent_status());

  const handleAcceptCookies = () => {
    posthog.opt_in_capturing();
    setConsentGiven('granted');
  };

  const handleDeclineCookies = () => {
    posthog.opt_out_capturing();
    setConsentGiven('denied');
  };

  return (
    <div>
      {consentGiven === 'pending' && (
        <div>
          <p>
            We use tracking cookies to understand how you use 
            the product and help us improve it.
            Please accept cookies to help us improve.
          </p>
          <button type="button" onClick={handleAcceptCookies}>Accept cookies</button>
          <span> </span>
          <button type="button" onClick={handleDeclineCookies}>Decline cookies</button>
        </div>
      )}
    </div>
  )
}
```

Back on our site, clicking accept or decline now opts users in or out of tracking cookies and hides the banner.

## Step 6: Testing it all out

To make sure everything works, try the following steps:

1. Go to the site and click accept or decline on the banner.
2. Confirm that the banner disappears and whether cookies are set or not.
3. Reload the page and check that the banner doesn’t load.
4. Delete your PostHog key in local storage and try with the other consent option.

If all that works, you’ve set up a basic tracking cookies consent banner in React. From here, you can customize it to your needs (such as adding other cookies) and the rest of your site’s design.

## Beyond cookie consent banners

If you’re interested in going further into tracking, data management, and cookies, check out these other resources:

1. A tutorial on [setting up cookieless tracking](/tutorials/cookieless-tracking).
2. A guide to [setting up a reverse proxy](/docs/integrate/proxy) to help your data stay first-party.
3. Sign up for our [EU Cloud](https://eu.posthog.com/signup).

<NewsletterForm />