👔 React Cookie Tailor

ℹ️ This is a fork of react-cookie-consent

🖼️ Default look

Footer

Details	About

🎬 Demo

You can find a demo here.

📦 Installation

npm install react-cookie-tailor

or use yarn:

yarn add react-cookie-tailor

📚 About

Our team was looking for a cookie consent solution that was easy to use and looked good. We initially found another library, but it was not suitable for our needs. More precisely, we wanted to comply with the GDPR and CPRA regulations, which require that the user must be able to decline cookies.

To summarize what these regulations require, you need to:

• provide a compliant cookie policy
• display a cookie consent banner at the user's first visit
• store the proof of consent
• block non-exempt cookies before obtaining the user's consent
• release the cookies only after the user has given their consent

🔨 Using it

You can import the cookie bar like this:

import { CookieTailor } from "react-cookie-tailor";

Then you can use the component anywhere in your React app like so:

<CookieTailor/>

Translations

You can provide translations for the text using the labels property. By default, the library will use the English translations. The default values can be found in constants/defaultLabels.ts

You can provide your own translations like so:

import CookieTailor, { Label } from "react-cookie-tailor";

const labels: Label = {
  // ...
  main: {
    buttonAllow: "Allow all",
    buttonDefault: "Allow default",
    moreSettings: "More settings",
    title: "This website uses cookies"
  }
  // ...
};

<CookieTailor labels={labels}/>

Customizing the colors

You can customize the colors by using the colors property. By default, the library will use the following colors:

import CookieTailor, { TailorColors } from "react-cookie-tailor";

const colors: TailorColors = {
  primary: "#2B567D",
  background: "#F5F1F1",
  white: "#FFFFFF",
  black: "#000000",
}

<CookieTailor colors={colors}/>

Providing your cookies details

You can provide your cookies details by using the cookies property. By default, the library will use the cookies listed in constants/defaultCookies.ts

You can provide your own cookies details like so:

import CookieTailor, { TailorCookiesDetails } from "react-cookie-tailor";

const cookies: TailorCookiesDetails = {
  categories: [
    CookieCategory.MANDATORY,
    CookieCategory.MARKETING,
    CookieCategory.PREFERENCES,
    CookieCategory.STATISTICS,
    CookieCategory.UNCLASSIFIED,
  ],
  data: [
    // ...
    {
      domain: "<your_domain>",
      title: "rct_cookie_consent",
      description: "This is a mandatory cookie that stores the user's cookie consent preferences.",
      expiration: "1 year",
      type: "HTTP",
      category: CookieCategory.MANDATORY,
    },
    {
      domain: "Google",
      title: "IDE",
      description:
        "Used by Google DoubleClick to register and report the website user's actions after viewing or clicking " +
        "one of the advertiser's ads with the purpose of measuring the efficacy of an ad and to " +
        "present targeted ads to the user.",
      expiration: "1 year",
      type: "HTTP",
      category: CookieCategory.MARKETING,
    },
    {
      domain: "Google",
      title: "test_cookie",
      description: "Used to check if the user's browser supports cookies.",
      expiration: "Session",
      type: "HTTP",
      category: CookieCategory.MARKETING,
    },
    // ...
  ],
};

<CookieTailor cookies={cookies}/>

Cookie categories

By default, the library will use the following cookie categories:

• MANDATORY for cookies that are necessary for the website to function
• MARKETING for marketing cookies
• PREFRENCES for cookies that store user preferences
• STATISTICS for cookies that analyzes user statistics
• UNCLASSIFIED for cookies that do not fall into any of the above categories

You can enable/disable the categories by using the categories property. By default, all categories are enabled.

const categories = [
  CookieCategory.MARKETING,
  CookieCategory.PREFERENCES,
  CookieCategory.STATISTICS,
  CookieCategory.UNCLASSIFIED,
];

<CookieTailor categories={categories}/>

Using the onAccept callbacks

You can use the onAccept callback to react to the user clicking the accept button. The callback will be called with the following TailorResponse object:

• cookieId: string | null
  • The id of the cookie that was created when the user visited the website for the first time
• cookieCreation: string | null
  • The date when the cookie described above was created
• categories: CookieCategoryDefinition[]
  • The categories that were accepted by the user

import CookieTailor, { TailorResponse } from "react-cookie-tailor";

const acceptFunction = (response: TailorResponse) => {
  console.log("Accept function called");
  console.log(response.cookieId);
  console.log(response.cookieCreation);
  console.log(response.categories);
};

<CookieTailor onAccept={acceptFunction}/>

Getting the cookies value in your code

react-cookie-tailor exports a function called getCookieConsentValue(cookieName: string). You can use it in your own code like so:

import CookieTailor, { Cookies, getCookieConsentValue } from "react-cookie-tailor";

console.log(getCookieConsentValue("your_custom_cookie_name"));

Reset the cookies value in your code

react-cookie-tailor exports a function called resetCookieConsentValue. You can use it in order to remove cookie in client-site:

import CookieTailor, { Cookies, resetCookieConsentValue } from "react-cookie-tailor";

console.log(resetCookieConsentValue());

📝 Props

🐞 Debugging it

Because the cookie consent bar will be hidden once accepted, you will have to set the prop debug={true} to evaluate styling changes:

<CookieConsent debug={true}></CookieConsent>

❔Questions

Why are there two cookies? One of which named "Legacy"

The short story is that some browsers don't support the SameSite=None attribute. The modern browsers force you to have SameSite set to something other than none.

So react-cookie-tailor fixes this like so:

• set the fallback cookie (e.g -legacy) first, this will always succeed (on all browsers)
• set the correct cookie second (this will work on modern browsers, fail on older ones)

When checking the cookie it'll do it in reverse. If the regular cookie exists, it'll use that. If no regular cookie exists it'll check whether the legacy cookie exists. If both are non-existent no consent was given.

The long story can be found here: #PR 68

💻 Contributor information

When making a PR please think about the following things:

• Update the ChangeLog (or include what you did in the PR and I'll add it, up to you)
• No need to build or update the package.json. I will do both on release.
• Please don't change code convention / style