@keepist/react-gdpr-cookie-banner v0.4.0

React GDPR Cookie Banner

A GDPR compliant Cookie Banner component for React.

Install

yarn add @keepist/react-gdpr-cookie-banner

or

npm install --save @keepist/react-gdpr-cookie-banner

Adjustments

This is a fork of https://github.com/Palmabit-IT/react-cookie-law

Custom adjustments are:

1. Change "Accept"-Button to "Accept All"-Button

When user clicks "Accept All" all options are getting selected and respective cookies are set.

2. Change "Decline"-Button to "Accept Selection"-Button

The Decline-Button got removed and therefor a "Accept Selection"-Button got introduced which basically just sets the selected cookies. Initially - if no checkbox is selected - this button just sets the necessary cookies.

3. Checkbox-Labels are clickable:

You can now click the labels to select/deselect the options

4. Introduced options to set an initial state for each checkbox:

Usage

import { CookieBanner } from '@keepist/react-gdpr-cookie-banner';

React.renderComponent(
  <div>
    <CookieBanner
      message="Cookie banner message"
      onAcceptPreferences = {() => { 
        // load your preferences trackers here
      }}
      onAcceptStatistics = {() => {
        // load your statistics trackers here
      }}
      onAcceptMarketing = {() => {
        // load your marketing trackers here
      }}
    />
  </div>,
  document.body
);

Options

Style

<CookieBanner
  message="Cookie banner message"
  styles={{
    dialog: { backgroundColor: 'red' }
  }}
/>

To style the buttons differently you can use the following classes:

Example of a custom style:

Test

yarn test

or

npm test

Author

Original Author

Palmabit-IT

Improvements

Daniel Engelhardt (keepist.de)

Licence

See the MIT License