Code Monkey home page Code Monkey logo

react-cookie-law's Introduction

React Cookie Law

npm version Build Status Coverage Status

A React Cookie Banner component GDPR compliance.

Preview

Install


yarn add @palmabit/react-cookie-law

or


npm install --save @palmabit/react-cookie-law

Usage

import { CookieBanner } from "@palmabit/react-cookie-law";

React.renderComponent(
  <div>
    <CookieBanner
      message="Cookie banner message"
      wholeDomain={true}
      onAccept={() => {}}
      onAcceptPreferences={() => {}}
      onAcceptStatistics={() => {}}
      onAcceptMarketing={() => {}}
    />
  </div>,

  document.body
);

Options

Name Type Default Description
className string optional. Classes
message string Required. Custom text of the banner
wholeDomain bool false optional. Enable or disable the root path '/' option when a cookie is set
policyLink string "/#" optional. Link to privacy policy page
privacyPolicyLinkText string "Privacy Policy" optional. Text for the privacy policy link
necessaryOptionText string "Necessary" optional. Text for the necessary cookies checkbox
preferencesOptionText string "Preferences" optional. Text for the preferences cookies checkbox
statisticsOptionText string "Statistics" optional. Text for the statistics cookies checkbox
marketingOptionText string "Marketing" optional. Text for the marketing cookies checkbox
acceptButtonText string "Accept" optional. Text for the accept button
declineButtonText string "Decline" optional. Text for the decline button
managePreferencesButtonText string "Decline" optional. Text for the manage preferences button
savePreferencesButtonText string "Decline" optional. Text for the save and close* button
showDeclineButton bool false optional. Show or hide the decline button
dismissOnScroll bool false optional. Enable or disable the dismissing on scroll of the banner
showPreferencesOption bool true optional. Show or hide the preferences checkbox
showStatisticsOption bool true optional. Show or hide the statistics checkbox
showMarketingOption bool true optional. Show or hide the marketing checkbox
preferencesDefaultChecked bool true optional. Check the preferences checkbox as default
statisticsDefaultChecked bool true optional. Check the statistics checkbox as default
marketingDefaultChecked bool true optional. Check the marketing checkbox as default
onAccept function Function optional. Callback called when the consent is given
onAcceptPreferences function Function optional. Callback called if preferences cookies is accepted
onAcceptStatistics function Function optional. Callback called if statistics cookies is accepted
onAcceptMarketing function Function optional. Callback called if marketing cookies is accepted
onDeclinePreferences function Function optional. Callback called if preferences cookies is declined
onDeclineStatistics function Function optional. Callback called if statistics cookies is declined
onDeclineMarketing function Function optional. Callback called if marketing cookies is declined
coryphaUserId string "1" optional. User ID of the current user
coryphaDocumentCode string "my-app" *optional**. The unique document code assigned to the application
coryphaDocumentLanguage string "en" *optional**. Callback called if *marketing* cookies is declined
coryphaApiKey string "12345678-abcd-dcba-abcd-1234567890ab" *optional**. Your Corypha API Key
onAcceptCoryphaPreferences function Function optional. Callback called when Corypha cookies are accepted
onDeclineCoryphaPreferences function Function optional. Callback called when Corypha cookies are declined

*NOTE: coryphaDocumentCode, coryphaDocumentLanguage and coryphaApiKey are required when setting up the Corypha integration.

Style

<CookieBanner
  message="Cookie banner message"
  styles={{
    dialog: { backgroundColor: "red" },
  }}
/>
Style option Description
dialog Style that override .react-cookie-law-dialog class
container .react-cookie-law-container class
message Style for banner text (.react-cookie-law-message class)
policy Style for cookie policy link (.react-cookie-law-policy class)
selectPane Style for select pane (.react-cookie-law-select-pane class)
optionWrapper Style for option checkbox wrapper (.react-cookie-law-option-wrapper class)
optionLabel Style for the text of checkbox labels
checkbox Style for checkboxes (.react-cookie-law-option-checkbox class)
buttonWrapper Style for buttons wrapper (.react-cookie-law-dialog class)
button Style for buttons (.react-cookie-law-dialog class)

Test


yarn test

or


npm test

Author

Palmabit

Licence

See the MIT License

react-cookie-law's People

Contributors

asarzina avatar b3nab avatar ceccode avatar chriskaya avatar dependabot[bot] avatar eliardo-gulliver avatar meixnertobias avatar mklblangenois avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-cookie-law's Issues

setState during render.

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

How to run/preview project locally?

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?

Configure cookie path

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

Doubt: What does react-cookie-law really make?

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!

Compilation failure: Unable to import crypto module

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.

wholeDomain option is not working

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 on every page load

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`);
            }}
        />

Compilation issue

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

showDeclineButton seems to do nothing

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:
image
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 ๐Ÿ˜

Failed to compile, module not found

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.

Error: Global is not defined

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?

Style checkbox

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.