By removing clx & styled-components

To improve referencing in npmjs registry

• build script should not be in test script
• add yarn version check to not forget yarn version between releases

Maybe the user should have the option to control the cookie name too?

The text for the cookieTextLabel is not showing at all, the text is there, but greyed out.

Hi, when arriving on github project, the default branch is 'master'
so the readme we are reading is deprecated.

for exemple, there is no need ton include css file (wich doesn't exist anymore)
this introduce some confusion

would be great to advancde master branch to the last published version

Jest & enzyme tests for CookieNotice component

The buttons are going out of the banner.

Great project!

Is there a way to register a callback for the accept button so I can load the cookies only if the user click accept?

with homemade i18n system

Full screen modal version

Export in a new component

• lock (https://github.com/github/fetch/blob/master/.github/workflows/lock.yml)
• rebase (https://github.com/cirrus-actions/rebase)

Add a prop to force theme

https://github.blog/changelog/2022-04-27-code-scanning-deprecation-of-codeql-action-v1/

In the newer version how to customize title styling? Also, there could be a way to align the banner towards the bottom center, left, and right prop. The class names are random, not sure we can even override style.

Check only src directory (example on xavierbriole/react-pinky)

When cookies are allowed, this library set the opacity to 0 on the containing div, but opacity still take space AND you can still click on it, which means that you can press the learn more even when the notice is hidden

A possible solution is to set display: none; or to not render the component at all (preferred as you don't use it anyway)...

A useful table (from SO):

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

0. Collapses the space that the element would normally occupy
1. Responds to events (e.g., click, keypress)
2. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Init storybook last version (6) in project

I've a footer on my website,

If I add react-cookienotice, and once cookies are accepted, I'm not able to click on footer link anymore. There is a div that is over my component and prevent me to click on link

To reduce bundle size because emotion is 54% smaller than styled-components

Remove classnames too because emotion integrate cs that does the same thing

In package.json :
"test:format": "prettier --check \"**/*.{js,json,css}\",

Add .prettierignore :

dist

Hi, I see some popups on sites that are exactly like this but have the cookie pic. Due to that reason, I am still using the older version?

is there a way to add a "Decline" button ?

I don't know if following legal text, some white-cookie are allowed to store cookie preferences ? (chicken and eggs issue)
but I imagine that a user could continue to browse on the target website even if he refused some cookie-related feature.

if no, do you plan to add it ?
thanks

Hi, really nice lib!

I'm planning to use this in a React app, but first I had two questions:

1. This is production-ready, isn't it?
2. Can I install it with npm i react-cookienotice instead of yarn?

Thanks

Hi, react-cookienotice is great, easy to add and looks great. However, the 'prefers-color-theme' media rule that forces a style is a bit annoying, really a simple true false prop would make it a much friendlier dev experience. I see that you've added a note to add that.

Add .npmignore file that ignore these files

jest snapshot testing

Develop custom cookie helper to reduce bundle size

Compare times and select best option :

• Cache only yarn's cache folder (https://github.com/actions/cache/blob/main/examples.md#node---yarn-2)
• Cache node_modules folder (https://dev.to/mpocock1/how-to-cache-nodemodules-in-github-actions-with-yarn-24eh)
• Cache function of setup-node action (https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-data)

This cookie notice is nice, I'd like to use it in my project but your react version is too old

https://codecov.io/

yarn install --frozen-lockfile

Hi this is a breaking change causing the issue in production that the version is not available?

How can the z-index of this component be set? It ignores the z-index of the container.

• Add codecov badge
• Add npm installation

See : https://github.com/codecov/codecov-action#%EF%B8%8F--deprecration-of-v1

Should set the max-width of wrapper

When user scroll to some px, the cookie notice should be accepted and closed
With progress bar