palmabit-it / react-cookie-law Goto Github PK

Hi,

First of all, thank you for your work, it seems to be exactly what I need :)
I'm having an issue at startup:

./node_modules/@palmabit/react-cookie-law/dist/index.js
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react'.

I'm using v0.6.1, on windows (git bash).

It seems to be caused by 2 require('React') in dist/index.js (works with require('react')). It might be related to this addition in webpack.config.js commit 4ce11ca:

  externals: {
    react: 'React',
  },

Could you have a look please? :)

Edit: confirmed on my side, I created a PR: #28

Hi, I have a doubt. What does react-cookie-law really make? I see this library creates 3 or 4 cookies for my web. But I need to implement to load/unload scripts for statistics cookies? like Google Analytics? or this library already does everything for my web, that is, it actually enables / disables the cookies of the actived / deactivated categories ?

A lot of thanks!

Hi, we're using react-cookie-law and see the following behaviour: the consent cookie rcl_consent_given is always set to the current path (default behaviour of the React-Cookies library you are using)

We have people landing and entering on all kinds of pages via search engine, e.g. /foo/bar/baz. Of course we have to display the cookie overlay right away. When the users consents, and then moves upwards in the directory hierarchy, they see the warning again (e,g. the cooke with the path /foo/bar/baz is not available on /foo anymore)

To solve this, one could set the path of rcl_consent_given and the others to /, so that these cookies are available for the whole domain. This could either be done via a config option or by hardcoding it in cookies.js in the options of the cookie (see https://github.com/reactivestack/cookies/tree/master/packages/react-cookie#setname-value-options)

I would be happy to provide a PR for either solution, if you can give me a hint on what you prefer :-)

Is it working well with Google analytics?

I see that React is listed as a dependency in package.json.
It looks like this causes React code te be injected into the generated javascript in the /dist of the npm module.
I don't think this is needed (nor desirable)?

I think it would be better to list React as a peer dependency?

The cookie banner component calls the passed callback function immediately during the rendering, without waiting for it to mount.

Trying to install the library in a gatsby project, getting the following build error:

`Generating development JavaScript bundle failed

Can't resolve 'crypto' in 'gatsby-site\node_modules@palmabit\react-cookie-law\dist'

If you're trying to use a package make sure that 'crypto' is installed. If you're trying to use a local file make sure that the path is correct.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }`

Tried installing crypto-browserify and making it as the fallback using webpack.config.js but still facing same issue.

I would like to clone the project and run it locally to test a few fixes and submit a PR. However I can't find a task in the package.json file on how to run the project locally (something like yarn dev or npm run dev)

How can I preview the library locally?

Is there a way to update our preference about cookie once the user has click on accept on decline ?

• "@palmabit/react-cookie-law": "^0.2.5"

Hello

I'm using React/Vite and I get the following Error after I instelled the repo.
Uncaught (in promise) ReferenceError: global is not defined
What can I do?

When setting wholeDomain option to true, cookies are still set on the current root, instead of on '/'

Just fixed it. I will create a PR

Callback events are called not only when acepting cookies, but also on every page load.

I set the following alert messages for the cookie banner just for testing. And every time I move to a different page on my website the alert messages are shown.

     <CookieBanner
            message={config.cookieMessage}
            wholeDomain={true}
            onAccept={() => {
                alert("accept")
            }}
            onAcceptPreferences={() => {
                alert(`accept preferences`);
            }}
            onAcceptStatistics={() => { 
                alert(`accept stat`)
            }}
            onAcceptMarketing={() => { 
                alert(`accept market`)
            }}
            onDeclineStatistics={() => {
                alert(`decline stats`);
            }}
        />

Just followed your instructions to install it with yarn, but error break script execution.

To be sure, i've just create-react-app, yarn start, and included:

import CookieBanner from "react-cookie-law";

In that moment recompiled app breaks:
Failed to compile ./src/App.js Module not found: Can't resolve 'react-cookie-law' in 'C:\Users\vicha\workspace\test\reactapp\src'

To reproduce you just need to create new react app, install the module with yarn, and run yarn start importing the package.

The user should be able to toggle the checkbox with a click on the label.

Not seen any params to set checkboxes as already set to true?

Hi,

I am trying to use the react cookie law component with styled components.

However because (as I can see sofar) the cookiebanner component does not implement a className prop, no styles get applied.

https://www.styled-components.com/docs/advanced#styling-normal-react-components

If I can find some time I could make a pull request for this. Would you be open to this?

Hi! Will it be possible to add support for TS? Thank you!

It looks like setting showDeclineButton to true does not cause the decline button to show up.

Here's the code I'm testing with:

<CookieBanner
        className="dark:bg-gray-50 dark:text-gray-800 bg-gray-800 text-gray-50"
        styles={{
          dialog: {
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            padding: '10px',
          }
        }}
        statisticsDefaultChecked={true}
        message="Cookie banner message"
        showDeclineButton={true}
        declineButtonText="Decline All"
        wholeDomain={true}
        onAccept = {() => {}}
        onAcceptPreferences = {() => {}}
        onAcceptStatistics = {() => {}}
        onAcceptMarketing = {() => {}}
/>

Which gives the result below:

As you can see there is no decline button.

It would be quite useful because new regulations in Europe require that "declining must be as easy as accepting".
Also let me know if I've missed something 😁

I'm trying to change the color of the checked and unchecked checkboxes and the following styling does not work:

checkbox:
{
checked: "#2f286e",
background: "#2f286e",
color: "#2f286e",
unchecked: "#2f286e"
}