:cookie: react-cookie-consent :cookie:

A small, simple and customizable cookie consent bar for use in React applications.

Demo (storybook): https://mastermindzh.github.io/react-cookie-consent/

Default look

Table of contents

• :cookie: react-cookie-consent :cookie:
• Default look
• Table of contents
• Installation
• Using it
  • getting the cookies value in your own code
  • reset the cookies value in your own code
• Props
• Debugging it
• Why are there two cookies? One of which named "Legacy"
• Styling it
  • Examples
  • Changing the bar background to red
  • Changing the button font-weight to bold
  • Using predefined CSS classes
  • Accept on scroll
  • Flipping the buttons
  • Extra cookie options
  • Rainbows
  • Overlay
• Contributor information
• Projects using react-cookie-consent

Installation

npm install react-cookie-consent

or use yarn:

yarn add react-cookie-consent

Using it

You can import the cookie bar like this:

import CookieConsent from "react-cookie-consent";

If you want to set/remove cookies yourself you can optionally import Cookies (straight from js-cookie) like this:

import CookieConsent, { Cookies } from "react-cookie-consent";

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

<CookieConsent>This website uses cookies to enhance the user experience.</CookieConsent>

You can optionally set some props like this (next chapter will show all props):

<CookieConsent
  location="bottom"
  buttonText="Sure man!!"
  cookieName="myAwesomeCookieName2"
  style={{ background: "#2B373B" }}
  buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
  expires={150}
>
  This website uses cookies to enhance the user experience.{" "}
  <span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>

One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property acceptedByScrolling to indicate if the acceptance was triggered by the user scrolling You can provide a function like so:

<CookieConsent
  onAccept={(acceptedByScrolling) => {
    if (acceptedByScrolling) {
      // triggered if user scrolls past threshold
      alert("Accept was triggered by user scrolling");
    } else {
      alert("Accept was triggered by clicking the Accept button");
    }
  }}
></CookieConsent>

If the decline button is enabled then the (onDecline) prop function can be used, this function will be called after the user has clicked the decline button. You can enable the button and provide a function like so:

<CookieConsent
  enableDeclineButton
  onDecline={() => {
    alert("nay!");
  }}
></CookieConsent>

getting the cookies value in your own code

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

import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";

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

reset the cookies value in your own code

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

import CookieConsent, { Cookies, resetCookieConsentValue } from "react-cookie-consent";

console.log(resetCookieConsentValue());

That option would be interesting if you want to allow user to change their consent. If you want to show again the consent bar, you must force "visible" prop to show again the bar.

Props