CookieHub is a cookie consent management platform designed to help website owners comply with data protection regulations, particularly the General Data Protection Regulation (GDPR) in the European Union. CookieHub provides tools and solutions that allow website administrators to easily obtain and manage user consent for the use of cookies and similar tracking technologies.

Key features of CookieHub include customizable cookie banners, preference centers, and mechanisms for obtaining granular consent from website visitors. The platform aims to simplify the process of implementing and maintaining compliance with privacy laws related to online tracking and data collection.

Get started by signing up if you don't already have an account.

Getting started

The CookieHub object should be initialized at the root of your project.

CookieHub.initialize('YOUR-DOMAIN-CODE', options)

See Configuration for details about the options parameter

React Implementation

Initialize CookieHub at the root of your project

./src/App.js

import React from 'react';
import CookieHub from 'react-cookiehub';

function App() {
  CookieHub.initialize('YOUR-DOMAIN-CODE');

  return (
    <div>
      ...
    </div>
  )
}

export default App;

Next.js App Router implementation

CookieHub utilizes the global window object, which is only available on the client side, so we need to create a client component to initialize CookieHub.

./components/CookieHubInit.tsx

"use client";
import { CookieHub } from 'react-cookiehub';
import { useEffect } from 'react';

export function CookieHubInit() {
  useEffect(() => {
    CookieHub.initialize('YOUR-DOMAIN-CODE');
  }, [])

  return null;
}

./app/layout.tsx

import { CookieHubInit } from '@/components/CookieHubInit'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {  

  return (
    <html>
      <head>
        <CookieHubInit />
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js is known to cause problems with the load order of scripts, so we recommend using the CookieHub Scripts to prevent this problem.

Next.js Pages Router implementation

Initialize CookieHub in the _app file at the root of your project inside a useEffect to prevent CookieHub from running on the server side.

./_app.tsx

import type { AppProps } from 'next/app'
import { useEffect } from 'react'
import CookieHub from 'react-cookiehub';

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    CookieHub.initialize('YOUR-DOMAIN-CODE');
  }, [])
  
  return <Component {...pageProps} />
}

Next.js is known to cause problems with the load order of scripts, so we recommend using the CookieHub Scripts to prevent this problem.

CookieHub Scripts

The CookieHub package provides several components to implement tracking scripts without having to worry about them running before consent is given.

CookieHubScript

The CookieHubScript component can be used to load scripts the same way as any other scripts. You must set the category that the tracking script belongs to using the category parameter.

External scripts:

<CookieHubScript 
  src="my-tracking-script.com/1.js" 
  category="analytics" 
/>

Inline scripts:

<CookieHubScript 
  innerHTML={`
    function myTrackingFunction(){
      // Do some tracking
    }
  `}
  category="marketing"
/>

CookieHubGA

The CookieHubGA component can be used to load Google Analytics into your project. Set the trackingID parameter as your Google Analytics tracking ID.

<CookieHubGA trackingID='G-A5B4C3D2E1' />

CookieHubPixel

The CookieHubPixel component can be used to load Facebook Pixel into your project. Set the pixelID parameter as your Facebook Pixel tracking ID.

<CookieHubPixel pixelID='123456789012345' />

CookieHubYoutube

The CookieHubYoutube component can be used to load Youtube videos into your project. This component replaces the youtube url with a youtube-nocookie url which does not set any tracking cookies.

Using Video Url:

<CookieHubYoutube url="https://www.youtube.com/watch?v=_OKGUAbpj5k" />

Using Video ID:

<CookieHubYoutube videoID={"_OKGUAbpj5k"} />

Configuration

If you're using other react packages to implement tracking services to your app you can utilize the onInitialise and onAllow CookieHub events to prevent them from running before CookieHub loads and is able to block them.

Tracking packages are different and might require different handling when loading them through CookieHub.

If the package requires initialization, similar to how CookieHub is initalized, you can use the onInitialize event that comes with the CookieHub package.

CookieHub.initialize('YOUR-DOMAIN-CODE', {
  onInitialise: () => {
    ReactGa.initialize('G-0000000000'); // Example for implementing Google Analytics 
  }
});

You can also use the onAllow event to initialize packages when certain categories are allowed:

CookieHub.initialize('YOUR-DOMAIN-CODE', {
  onAllow: (category) => {
    if (category === 'analytics') {
      ReactGa.initialize('G-0000000000'); // Example for implementing Google Analytics 
    }
  }
});

Events

Example of available events and how they can be utilized:

CookieHub.initialize('YOUR-DOMAIN-CODE', {
  onInitialise: (status) => {
    // CookieHub has been initalized
  },
  onAllow: (category) => {
    if (category === 'analytics') {
      // Consent has been given for the analytics category
    }
  },
  onRevoke: (category) => {
    if (category === 'marketing') {
      // Consent has been denied for the marketing category
    }
  },
  onStatusChange: (status, previousState) => {
    if (status.answered === true) {
      // User has updated their consent state
    }
  }
});

Methods

load()

This method initializes CookieHub. It should be part of the default provided code and should only be called once on each page load. Any attempt to initialize CookieHub again will be ignored.

options (object): An object containing a list of options and events.

CookieHub.load(options)

hasAnswered()

Checks if the user has already made cookie choices by allowing all cookies or saving settings. This method doesn't accept any parameters.

CookieHub.hasAnswered()

hasConsented(category)

Checks if the user has allowed the specified cookie category.

category (string): The name or ID of the cookie category to check.

CookieHub.hasConsented(category)

openDialog()

Opens the CookieHub dialog, typically displayed on the first load.

CookieHub.openDialog()

closeDialog()

Closes the CookieHub dialog if it's still open.

CookieHub.closeDialog()

openSettings()

Opens the CookieHub settings dialog. Useful if you've hidden the settings icon and want to create a custom link or button for opening the settings dialog.

CookieHub.openSettings()

closeSettings()

Closes the CookieHub settings dialog.

CookieHub.closeSettings()

allowAll()

Allows all cookie categories. This method offers an alternative way for users to consent to all categories.

CookieHub.allowAll()

denyAll()

Denies all cookie categories. Similar to allowAll(), this method offers an alternative way for users to revoke consent for all categories.

CookieHub.denyAll()

Linker

The Linker feature provided by CookieHub is a powerful tool that enables website owners to forward user consents to a different top-level domain with ease. This feature helps website owners eliminate repeated CookieHub consent dialogs when switching between top-level domains, as well as avoid requesting user consent again when changing a website's domain name.

CookieHub.initialize('YOUR-DOMAIN-CODE', {
  linker: ['domain1.com', 'domain2.com']
});

Debug

You can enable the debug flag to get more information from your CookieHub implementation which might help to solve some problems with the setup.

CookieHub.initialize('YOUR-DOMAIN-CODE', {
  debug: true
});

FAQs

What is react-cookiehub?

Is react-cookiehub popular?

Is react-cookiehub well maintained?

Package last updated on 12 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-cookiehub

react-cookiehub

Table of Contents

What is CookieHub?

Getting started

React Implementation

Next.js App Router implementation

Next.js Pages Router implementation

CookieHub Scripts

CookieHubScript

External scripts:

Inline scripts:

CookieHubGA

CookieHubPixel

CookieHubYoutube

Using Video Url:

Using Video ID:

Configuration

Events

Methods

load()

hasAnswered()

hasConsented(category)

openDialog()

closeDialog()

openSettings()

closeSettings()

allowAll()

denyAll()

Linker

Debug

Related posts

react-cookiehub

react-cookiehub

Table of Contents

What is CookieHub?

Getting started

React Implementation

Next.js App Router implementation

Next.js Pages Router implementation

CookieHub Scripts

CookieHubScript

External scripts:

Inline scripts:

CookieHubGA

CookieHubPixel

CookieHubYoutube

Using Video Url:

Using Video ID:

Configuration

Alternative ways to block scripts until consent is given

Events

Methods

load()

hasAnswered()

hasConsented(category)

openDialog()

closeDialog()

openSettings()

closeSettings()

allowAll()

denyAll()

Linker

Debug

Related posts

Introducing Socket Fix for Safe, Automated Dependency Upgrades

CISA Rebuffs Funding Concerns as CVE Foundation Draws Criticism

Introducing Historical Analytics – Now in Beta