0.1.2 • Published 4 years ago

react-cookiefirst v0.1.2

Weekly downloads
Last release
4 years ago


A simple React component for loading and interacting with CookieFirst banner.


yarn add react-cookiefirst
// or
npm install react-cookiefirst


import ReactCookieFirst from "react-cookiefirst";

Then you can use it as a standalone component to simply load the banner

<ReactCookieFirst apiKey="XXXXXX" />

Or as a context provider to get access to current consent state and various methods

<ReactCookieFirst apiKey="XXXXXX">
  <SomeContextConsumer />
  {/* some other components */}

SomeContextConsumer.jsx file:

import { useCookieFirst } from "react-cookiefirst";

const SomeContextConsumer = () => {
  const context = useCookieFirst();

  // ...

ReactCookieFirst props

apiKeystring""API key coming from cookiefirst.com panel
silentbooleanfalseSilent mode to hide all CookieFirst console logs
stealthbooleanfalseStealth mode to hide default banner UI. Use with custom banner
langstringundefinedForce banner UI texts in a given language. E.g. lang="de"
renderBeforeReadybooleanfalseEnable this to render component's children before CookieFirst banner is loaded


When using the useCookieFirst context hook, the returned value is an object with the following properties:

consentnull or ConsentCurrent user's consent. Will be null before user consents for the first time.
openPanelfunctionopens the settings panel / modal. Unavailable in stealth mode
closePanelfunctioncloses the settings panel / modal. Unavailable in stealth mode
updateConsentasync functionTakes as an argument the new Consent and saves it
acceptCategoryasync functionTakes as an argument name of a cookie category and saves consent with this category accepted
acceptAllCategoriesasync functionSaves consent with all categories accepted
acceptPreselectedCategoriesasync functionSaves consent with only preselected categories from the cookiefirst admin panel
declineAllCategoriesasync functionSaves consent with all categories rejected
declineCategoryasync functionTakes as an argument name of a cookie category and saves consent with this category rejected
withdrawConsentasync functionWithdraws previous consent. Can be used only after consent is given.

⚠️ All of the consent-changing functions will trigger a page reload if there was a previously saved consent. This is done because on initialization CookieFirst banner checks accepted categories and loads respective scripts. There is no way to "unload" a script once it's loaded.

The consent object

The consent object has the following structure:

  necessary: boolean;
  performance: boolean;
  functional: boolean;
  advertising: boolean;

This is the object which is available under consent property of the object returned by useCookieFirst hook. This is also the structure expected by the updateConsent function. Example:

const ctx = useCookieFirst();
  necessary: true;
  performance: true;
  functional: false;
  advertising: false;

  functional: true,

// website reloads because there was previous consent

The acceptCategory and declineCategory functions expect to be passed a key from the consent object. For example

const ctx = useCookieFirst();
// no window reload if this is the first consent, reload if not the first consent