mastermindzh / react-cookie-consent

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

🍪 react-cookie-consent 🍪

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

• 🍪 react-cookie-consent 🍪
  • 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

Prop	Type	Default value	Description
location	string, "top", "bottom" or "none"	"bottom"	Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable.
visible	string, "show", "hidden" or "byCookieValue"	"byCookieValue"	Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence.
children	string or React component		Content to appear inside the bar
disableStyles	boolean	false	If enabled the component will have no default style. (you can still supply style through props)
hideOnAccept	boolean	true	If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept)
buttonText	string or React component	"I understand"	Text to appear on the button
declineButtonText	string or React component	"I decline"	Text to appear on the decline button
cookieName	string	"CookieConsent"	Name of the cookie used to track whether the user has agreed. Note that you also have to pass this to the getCookieConsentValue and resetCookieConsentValue functions as they default to "CookieConsent" as well.
cookieValue	string or boolean or number	true	Value to be saved under the cookieName.
declineCookieValue	string or boolean or number	false	Value to be saved under the cookieName when declined.
setDeclineCookie	boolean	true	Whether to set a cookie when the user clicks "decline"
onAccept	function	() => {}	Function to be called after the accept button has been clicked.
onDecline	function	() => {}	Function to be called after the decline button has been clicked.
debug	boolean	undefined	Bar will be drawn regardless of cookie for debugging purposes.
expires	number	365	Number of days before the cookie expires.
extraCookieOptions	object	{}	Extra info (apart from expiry date) to add to the cookie
overlay	boolean	false	Whether to show a page obscuring overlay or not.
containerClasses	string	""	CSS classes to apply to the surrounding container
buttonClasses	string	""	CSS classes to apply to the button
buttonWrapperClasses	string	""	CSS classes to apply to the div wrapping the buttons
customButtonWrapperAttributes	React.HTMLAttributes<HTMLDivElement>	{}	Allows you to set custom (data) attributes on the button wrapper div
declineButtonClasses	string	""	CSS classes to apply to the decline button
buttonId	string	""	Id to apply to the button
declineButtonId	string	""	Id to apply to the decline button
contentClasses	string	""	CSS classes to apply to the content
overlayClasses	string	""	CSS classes to apply to the surrounding overlay
style	object	look at source	React styling object for the bar.
buttonStyle	object	look at source	React styling object for the button.
declineButtonStyle	object	look at source	React styling object for the decline button.
contentStyle	object	look at source	React styling object for the content.
overlayStyle	object	look at source	React styling object for the overlay.
disableButtonStyles	boolean	false	If enabled the button will have no default style. (you can still supply style through props)
enableDeclineButton	boolean	false	If enabled the decline button will be rendered
flipButtons	boolean	false	If enabled the accept and decline buttons will be flipped
ButtonComponent	React component	button	React Component to render as a button.
sameSite	string, "strict", "lax" or "none"	none	Cookies sameSite attribute value
cookieSecurity	boolean	undefined	Cookie security level. Defaults to true unless running on http.
ariaAcceptLabel	string	Accept cookies	Aria label to set on the accept button
ariaDeclineLabel	string	Decline cookies	Aria label to set on the decline button
acceptOnScroll	boolean	false	Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage)
acceptOnScrollPercentage	number	25	Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled
customContentAttributes	object	{}	Allows you to set custom (data) attributes on the content div
customContainerAttributes	object	{}	Allows you to set custom (data) attributes on the container div
onOverlayClick	function	() => {}	allows you to react to a click on the overlay
acceptOnOverlayClick	boolean	false	Determines whether the cookies should be accepted after clicking on the overlay
customButtonProps	object	{}	Allows you to set custom props on the button component
customDeclineButtonProps	object	{}	Allows you to set custom props on the decline button component

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>

Note: Don't forget to remove the debug-property for production.

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

This happens on lines 29-37

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: pull-request#68

Styling it

You can provide styling for the bar, the button and the content. Note that the bar has a display: flex property as default and is parent to its children "content" and "button".

The styling behaves kind of responsive. The minimum content width has been chosen to be "300px" as a default value. If the button does not fit into the same line it is wrapped around into the next line.

You can style each component by using the style, buttonStyle and contentStyle prop. These will append / replace the default styles of the components. Alternatively you can provide CSS classnames as containerClasses, buttonClasses and contentClasses to apply predefined CSS classes.

You can use disableStyles={true} to disable any built-in styling.

Examples

Changing the bar background to red

<CookieConsent style={{ background: "red" }}></CookieConsent>

Changing the button font-weight to bold

<CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>

Using predefined CSS classes

You can pass predefined CSS classes to the components using the containerClasses, buttonClasses and contentClasses props. The example below uses bootstrap classes:

<CookieConsent
  disableStyles={true}
  location={OPTIONS.BOTTOM}
  buttonClasses="btn btn-primary"
  containerClasses="alert alert-warning col-lg-12"
  contentClasses="text-capitalize"
>
  This website uses cookies to enhance the user experience.{" "}
  <span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>

Which results in:

Accept on scroll

You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage. It is legal in some use-cases, Italy being one of them. Consult your legislation on whether this is allowed.

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

Flipping the buttons

If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

<CookieConsent enableDeclineButton flipButtons>
  Flipped buttons
</CookieConsent>

Which results in:

Extra cookie options

You can add more cookie options using the extraCookieOptions parameter like so:

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

Rainbows

If you're crazy enough you can even make a rainbow colored bar:

<CookieConsent
  buttonText="OMG DOUBLE RAINBOW"
  cookieName="myAwesomeCookieName2"
  style={{
    background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)",
    textShadow: "2px 2px black",
  }}
  buttonStyle={{
    background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)",
    color: "white",
    fontWeight: "bolder",
    textShadow: "2px 2px black",
  }}
>
  This website uses cookies to enhance the user experience.{" "}
  <span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>

Overlay

You can also generate a page-obfuscating overlay that will prevent actions other than interacting with the cookie consent button(s).

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

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

Projects using react-cookie-consent

The list below features the projects which use react-cookie-consent (that I know off):

• bs-react-cookie-consent
• comicrelief's storybook
• inici Gatsby theme
• Scrivito Example App

react-cookie-consent's Issues

customized children accept cookie button

Is there a way to add a button element as children of the component, and the function is same as the accept button?

i just want to put the button inside a position relative div while the parent component is still fixed position.

thanks

Disable location styling.

I would like to style the component through CSS classes that I use in my app, but the location prop is enforcing some style.

I can disable this by passing a bogus string on location but then I will get an error in console:

Warning: Failed prop type: Invalid prop location of value none supplied to CookieConsent, expected one of ["top","bottom"].

It would be nice if we could provide null to location to remove said styling or if disableStyles would also disable said styles, or if we had another prop, for example disablePositioningStyles.

If you find one of the above solutions acceptable I could work on a pull request for it.

Cookie not set in Chrome

Hi i'm using Chrome Version 85.0.4183.121 (Official Build) (64-bit) on Windows 10 x64

After accepting the cookie is not set.

If testing on Edge, Firefox , everything works as expected. Could somebody please attempt to test on same version thanks.

How to check if consent cookie is present?

Hey there,

Once the consent is accapted and the cookie is set, it is neccessary to check the cookie on every page reload and fire the 'onAccept' function. Maybe it's a good idea to implement something to deal with this cases or at least put an example in the readme.

Thank you for your work! ✌️

buttonText type

I would like to suggest a change of buttonText proptype.
My application uses react-intl for i18n, which renders components for translatet strings.
I can pass a i18n component as buttonText, which works but creates an error because object doesn't match string type.

My suggest for a fix would be to allow react components as valid proptype for buttonText.

How to add aria-label to the button?

Hello,

Is it possible to add aria-label as props to the button without having to create own button with logic?

Thank you for your hard work!

Disable button

Hey!
Thanks for a great package/component!
I just have a quick question - is it possible to somehow disable the button? I want the user to check a checkbox before they can click accept. Any suggestions on how I can achieve this?

Many thanks,
Charlotte 🤓

Add `disableButtonStyles` option?

I have what I believe to be a common use case; I want to use the default styles but just style the button (in my case with a bootstrap btn btn-primary class names). But if I provide buttonClasses="btn btn-primary", it is overridden by the inline styles. If I add disableStyles={true}, I lose all the other styles.

Thoughts on adding a disableButtonStyles option to remove only the button styles?

Cookie is lost in translation, whilst using iOS Chrome & Android Firefox

We are currently using your cookie consent banner in production and noticed a bug.

We used all default values except that we used sameSite="strict". However when testing our banner we noticed that when we login and log out using (aws cognito) the cookie just disappears from the cookie storage on Apple iOS chrome (mobile) & Android Firefox releases. This problem disappears when we change sameSite="lax"

Anyone have any explanations as to why this is happening?

Tag releases, Link in Changelog, Add Dates to Changelog

Hey there,

I'd like to suggest a few organisational changes to your change handling:

1. Please tag releases => That way visitors from the outside can have a look at what changed in versions by themselves and see how/why you changed what's mentioned in the changelog. If it's too much work to go through history and tag all releases, maybe just start with it now. (At least future me can profit that way 😄)
2. Building on top of that, you could then link said tags in the changelog and have a coarse overview in the Changelog.md and a more fine-grained/detailed change view from the Github history.
3. Add dates to the version numbers (This would also help with 1.)

This is obviously only a personal preference and doing so for past releases might be a lot more work than neccessary, I'd be more than happy if you'd just consider this for the future at least.

Thanks

Disabling position fixed

Hey Mastermindzh,

I have been trying to disable to position='fixed' CSS in styles, I have overwritten some styles to my needs but the position='fixed' seems to always come back when it isn't needed, have you run into this issue or found any workaround?

Disable auto hiding of the component

For the purpose of animating the component when the user clicks accepts, it would be nice if we had an option to instead of removing the component by setting the state visible to false and thus returning null on render, to let ’onAccept’ handle the hiding.

I propose adding a prop autoHide: PropTypes.bool that defaults to true and changing accept() to

  accept() {
    const { cookieName, expires, autoHide } = this.props;

    Cookies.set(cookieName, true, { expires: expires });
    if (autoHide) {
      this.setState({ visible: false });
    }
  }

If you agree I can create a pull request with the above changes.

Also thank you so much for creating this and replying so fast 🥇

Consent check does not work on Microsoft Edge, Cookies are set without consent!!

On Chrome, no Google (Analytics) cookies are set if the Consent is not given by the pop up click.

On Edge, some cookies are already set although the user did not click nothing yet!

This should not happen, here is a screenshot (am is our session cookie, the others should not be set!)

react-cookie-consent storing data twice on click

Hey i am using this npm package https://www.npmjs.com/package/react-cookie-consent for creating a cookies consent in my react type script app now and through this package i can store some data in cookies after user permission. Now there are two problems first it is storing after clicking on accept button it stores two object in cookies, second the change in cookies is not showing immediately in application tab in cookies section i had to reload to see the changes.

import React, {FC} from 'react'
import CookieConsent from "react-cookie-consent";

const CookiesBar : FC<any> = ({closeCookieBar}) => {
  const lang = localStorage.getItem('language');
  return (
    <CookieConsent
      location="bottom"
      enableDeclineButton
      buttonText="I understand"
      declineButtonText="Decline"
      style={{ background: "#2B373B" }}
      cookieName="language"
      cookieValue={`${lang}`}
      buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
      declineButtonStyle={{ fontSize: "13px" }}
      setDeclineCookie={false}
      onAccept={({ acceptedByScrolling }) => {
        if (!acceptedByScrolling) {
          closeCookieBar();
        }
      }}
      onDecline={() => closeCookieBar()}
    >
      This website uses cookies to enhance the user experience.{" "}
    </CookieConsent>
  )
}
export default CookiesBar;

Question about dependencies

Hi there, I'm interested in using your consent component and I'm curious about some of the dependencies, would love it if you could clarify for me:

1. what are the reasons for including webpack-copy-plugin in the dependencies? is it somehow used by the final built version?

2. what are the reasons to have react as dependency instead of peer dependency?

Check if the cookie exists

Hi Rick,

Great job with this plugin. I'm trying to add a class to the body to add a margin at the bottom so that the cookie is not displayed over the footer.

What do you think is the way to check if the cookie was accepted? Not only in onAccept but even if it was previously accepted.

Should I just use document.cookie?

Thanks

Button hover styles

Is there a method to change 'accept' button hover styles?

Issue in Chrome console: Mark cross-site cookies as Secure to allow setting them in cross-site contexts

The warning reads:
Cookies marked with SameSite=None must also be marked with Secure to allow setting them in a cross-site context. This behavior protects user data from being sent over an insecure connection.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests

Looks awesome but needs typescript types.

Looks awesome but needs typescript types. ... I might write some if I can't find anything better.

Thanks!

Accept classnames

Styling through styles is nice but for bigger apps, you might already have classes that define styles for your elements.

It would be nice if we could pass class names for main container, content container, and button.

Add cookie options

Request for the ability to add cookie options to the consent cookie created when accepted.

We use multiple subdomains on our site such as www, docs, and manage and would like to have all 3 subdomains use the same cookie consent bar cookie (accept once works on all subdomains). For this we need to be able to set the domain of the cookie to the top level domain of our site as the default will limit it to the subdomain only. I'm sure others may find adding generic cookie options to the cookie useful as well.

About not setting Cookies automatically

react-cookie-consent/src/index.js

Line 145 in f3c5bfc

Cookies.set(cookieName, declineCookieValue, { expires: expires, ...extraCookieOptions });

Could it be possible that setting cookies after replying would be optional? If one does a REST call (or other) after onAccept() and store the result in Db.

Typescript error about '@types/js-cookie'

When you run a React Typescript project, you'll see this error:

Try `npm install @types/js-cookie` if it exists or add a new declaration (.d.ts) file containing `declare module 'js-cookie';`

buttonWrapperClasses type missing.

The type buttonWrapperClasses is missing therefore throwing a typescript error even though it still applies the custom class to the button wrapper

Possibibility to set the sameSite attribute of the created cookie

Thank you for the great contribution!
Soon firefox will reject the non-secure cookies with the attribute sameSite set none:

Cookie “myCookie” rejected because it has the “sameSite=none” attribute but is missing the “secure” attribute.

Currently, it is just a warning. Can we have possibility to specify sameSite in the configuration of the component?

Added ID attribute to the button

It would be good to have a prop called buttonId to allow adding an ID.

Helps with Selenium tests and general DOM hooks etc.

Object.values is not a function

Hi,

In IE the Object.values function that is used in PropTypes is not available. It could either be resolved by adding a polyfill or by replacing with Object.keys(OPTIONS).map(key => OPTIONS[key]).

Positioning styles passed to component no longer work

Hi!

We used to call the component setting position: sticky like this, to make the cookie banner "sticky":

<CookieConsent style={{ position: 'sticky' }}>
  Cookie text!
</CookieConsent>

But now that the component has a wrapping div, this style is set on the inner div instead, and the positioning doesn't work.

Is there a new configuration we should be looking at to make this work like it used to? Thanks!

FYI - published bucklescript bindings for react-cookie-consent

@Mastermindzh this component works great, but my project is in ReasonReact, so I published some BuckleScript bindings for it. (https://github.com/ctbucha/bs-react-cookie-consent)

How to add Decline button

It looks like there is only 1 button to accept the cookies.
How can I add a decline button?

How do I fix CookieConsent-legacy name?

I didn‘t update my codebase at all except for dependabot PRs. I‘m noticing either my renamed CookieConsent or default have -legacy appended to it.

I am not sure how to resolve this and right now I‘m resorting to to have CookieConsent-legacy in my code. What is the context that triggers this legacy appended in the name?

Thank you! will share a tutorial for beginners like myself once I resolve this.

Google Analytics is not activated

Hi,
In order to see the user data, the user needs to refresh the page after accepting the cookie consent. Even after navigating to a new page the Google Analytics is not activated.

I am using gatsby with gatsby-gdpr-google-analytics

import CookieConsent from 'react-cookie-consent';

<CookieConsent
          location="bottom"
          buttonText="Accept"
          declineButtonText="Decline"
          cookieName="gatsby-gdpr-google-analytics">
... check out our Privacy Policy.
</CookieConsent>```

How center button Accept?

How center the button?

iE11 polyfill

when running on IE11 with server side rendering using nextjs Object.assign is not a function error is thrown.would be great if you can add polyfill.

Wrapper for buttons to keep them together

The Problem

If rendered on a smaller screen, the wrapping of accept/decline buttons is a problem:

Reproduction steps

To see the above, simply narrow the browser window, or using Chrome:

1. start Chrome Developer Tools (F12)
2. click Toggle Device Toolbar
3. ensure the Device Toolbar is set to Responive
4. narrow the window until the first button wraps

A suggestion

Consider adding a wrapper div around the buttons and exposing the class properties for it?

Possible workaround

I haven't experimented with yet:

1. disabled the decline button
2. pass in your own ButtonComponent property
3. your ButtonComponent would actually render a container and 2 buttons

This puts a lot of burden on the user to render both buttons and maintain properties across them.

problem when used in gatsby

in https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L385

you are referring to a global location object.

When I use this component in a gatsby website (during yarn build), this is not defined and causes a build problem.
Would it be possible to rewrite the default to be evaluated within the component?

see also https://www.gatsbyjs.org/docs/debugging-html-builds/

How to trigger react-cookie-consent on click of a link/button?

I am trying to replicate this behavior which on clicking say a link or button; it reopens react-cookie-consent so if non-technical visitor changed their minds they can do it without having to clear cookie with devtools:

v2.4.0 broken npm deploy

[email protected] (#47) was deployed to npm without the last merge commit of that PR. That merge contains updates to the ts file (#40) so 2.4.0 is missing that bug fix thus breaking any ts project currently on 2.4.0

Fix: Redeploy to npm

Another issue with #47 is this new type definition:
https://github.com/Mastermindzh/react-cookie-consent/pull/47/files?file-filters%5B%5D=.js&file-filters%5B%5D=.ts#diff-b739f95ace6bbf2f0fd5e8cf1dab97d8R20
Should be setDeclineCookie?: boolean

acceptOnScroll not being respected in debug mode

The value of acceptOnScroll is ignored in debug mode meaning it always creates the scroll listener

This should fix it:

-    if ((this.props.acceptOnScroll && Cookies.get(cookieName) === undefined) || debug) {
+    if (this.props.acceptOnScroll && (Cookies.get(cookieName) === undefined || debug)) {

Determine if accepted on scroll

It would be useful to know if the cookie consent was provided explicitly by clicking the button, or implicitly by scrolling. I figured the simplest solution would be to provide a parameter in the onAccept method.

For instance, if it was accepted on scroll the method could be invoked with an object:

{ acceptedByScrolling: true }

Open to other implementations too.

If you are happy with the concept, let me know what implementation you'd prefer and I'm happy to submit a PR for it.

Adding Additional Button

Hey,

Another question, Would it be able to add a additional button that can handle links so I could have a button which will go to cookie settings, or is there any way to refactor the decline button to do this?

Thanks

change link from readme

Hi, I can see in your readme within the section of projects using your (wonderful) package that there is a link that points to nowhere (inici gatsby theme)

It should be updated to https://github.com/kuworking/gatsby-theme-kuworking-core

Thanks!

Hide on scroll

Hey @Mastermindzh,

at first, nice module, good API and it just works.
I've a question, what do you think about a acceptOnScroll option? I'v seen this functionality in other modules and i'am wondering if its also a case for this one?

So some kind of window.addEventListener('scroll') which executes this.accept on scroll start.

But at first it would be interesting if this is even allowed.

Issue with server side rendering

Hello,

I have a small issue in my server side rendered react app.

The config I used is very close to the one that can be found here :
https://github.com/manuelbieh/react-ssr-setup

The behaviour I have in production mode is :

The cookie banner appears when loaded from the server (the cookie CookieConsent variable is not being used I guess)

Once the app is hydrated the cookie banner disappear. (Now the cookie is read)

Does someone has experienced this issue before or have any advice to avoid that ?

Thank you in advance.

Props not being respected

Thanks for creating this, this is super useful!

I've got a CookieNotice component in my React project, which is imported in a Layout component that is wrapped around my app. However, react-cookie-consent isn't respecting the props I define such as disableStyles: {true}.

Here's my code:

import React from 'react'
import { Flex, Box } from 'reflexbox'
import CookieConsent from 'react-cookie-consent'

const CookieNotice = () => {
  return (
    <Flex justifyContent={'center'}>
      <Box
        as={CookieConsent}
        disableStyles={true}
        debug={true}
        buttonText=""
        onAccept={() => {
          // Do stuff
        }}
        >
        <span role="img" aria-label="cookie-emoji">🍪</span>
        Our website uses cookies to provide livechat and analytics.
      </Box>
    </Flex>
  )
}

export default CookieNotice

Any idea what may be causing this?

Add option to override containerClass name entirely

The default name of 'cookieConsent', used to style the container div, appears on some ad blocker's "annoyances filter" list, e.g. AdGuard. See the list at https://filters.adtidy.org/extension/chromium/filters/14.txt.

By default, react-cookie-consent will be blocked if this filter is enabled:

It would be useful to have an option to override the containerClass name entirely so as to be able to try to avoid these sort of blocks. If employed, the caller would be responsible for providing replacement styling for the alternative class name given.

This could be useful on sites where acceptance of cookies is required in order for the site to function.

Invalid prop style error after overlay release

After upgrading to v5.1.0, on page load, the following warning appears:
index.js:2177 Warning: Invalid prop `style` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.

It happens because of this line of code: 76ec5ba#diff-1fdf421c05c1140f6d71444ea2b27638R324

At first I thought it is the custom style prop that I pass in, but the error also happens without any props passed to <CookieConsent/> from the user.

Revoke consent after accepted

Hi, thanks for this plugin. In your experience, what do you think is the best way to revoke consent once it has already been accepted?

onDecline disable Google tag manager

Hey!
Im using gatsby-plugin-google-tagmanager plugin. When page open its automaticly set this google tag manager to cookies. But how can i disable google tag manager with onDecline function and don`t set it in cookies ?

Support overlay when cookie consent component is visible.

I have submitted a PR #71 to implement an overlay feature that will cover all of the page with exception of the consent component itself.

Steps to test the feature are included in the PR.

Inspiration for this came from seeing how the cookie consent feature worked on https://imgur.com/