react-cookie-consent

To handle browsers that do not support the SameSite=None attribute, react-cookie-consent uses two cookies:

1. Fallback Cookie: A cookie with a -legacy suffix is set first. This is designed to succeed on all browsers.
2. Standard Cookie: The primary cookie is set second. This works on modern browsers but may fail on older ones.

Checking Consent Logic: When the component checks for consent, it performs the check in reverse order:

• It first checks for the regular cookie. If it exists, consent is granted.
• If the regular cookie is missing, it checks for the legacy cookie. If that exists, consent is granted.
• If neither exists, no consent has been given.

Because the cookie consent bar is hidden once a user accepts it, you can use the debug={true} prop to keep the bar visible while evaluating styling changes.

Note: Ensure you remove the debug property before deploying to production.

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

Install the package using npm or yarn to add the cookie consent bar to your React application.

npm install react-cookie-consent

or use yarn:

yarn add react-cookie-consent

You can automatically accept cookies when a user scrolls a certain percentage of the page. To use this, set:

• acceptOnScroll: true
• acceptOnScrollPercentage: A number representing the percentage of scroll required to trigger acceptance (e.g., 50).

<CookieConsent
  acceptOnScroll
  acceptOnScrollPercentage={50}
  onAccept={() => console.log('Accepted via scroll')}
>
  Scroll to accept cookies!
</CookieConsent>

The overlay prop generates a page-obfuscating overlay. This prevents users from interacting with the rest of the page until they interact with the cookie consent buttons.

<CookieConsent location="bottom" cookieName="myAwesomeCookieName3" expires={999} overlay>
  This website uses cookies to enhance the user experience.
</CookieConsent>

Import CookieConsent to render the consent bar anywhere in your React application. You can pass children to the component to define the message displayed to the user. You can also customize the appearance and behavior using props like location, buttonText, cookieName, style, buttonStyle, and expires.

import CookieConsent from "react-cookie-consent";

<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>

If you have enabled the decline button using enableDeclineButton, you can use the flipButtons prop to reverse the order/position of the buttons.

<CookieConsent enableDeclineButton flipButtons>
  Flipped buttons
</CookieConsent>

You can configure the cookie bar to disappear automatically after a user scrolls a specific percentage of the page. This behavior should be checked against local legislation (e.g., Italy) to ensure compliance.

Use the following props:

• acceptOnScroll: Set to true to enable this feature.
• acceptOnScrollPercentage: The percentage of scroll required to trigger acceptance.
• onAccept: A callback function that receives a boolean indicating if consent was given via scrolling.

<CookieConsent
  acceptOnScroll={true}
  acceptOnScrollPercentage={50}
  onAccept={(byScroll) => {
    alert(`consent given. \n\n By scrolling? ${byScroll}`);
  }}
>
  Hello scroller :)
</CookieConsent>

Use the onAccept and onDecline props to execute logic when a user interacts with the consent bar.

• onAccept: Receives an object with a boolean property acceptedByScrolling. This indicates if the user accepted by scrolling (if configured) or by clicking the button.
• onDecline: Triggered when the user clicks the decline button. Note that you must include the enableDeclineButton prop for this to be available.

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

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

You can pass additional configuration options to the underlying cookie implementation using the extraCookieOptions prop. This is useful for setting properties like domain.

<CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>

Use the getCookieConsentValue function to check the current status of the consent cookie in your application logic. You must provide the cookieName used by the component.

import { getCookieConsentValue } from "react-cookie-consent";

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