@keepist/react-gdpr-cookie-banner

GDPR compliant cookie banner for react

Usage no npm install needed!

<script type="module">
  import keepistReactGdprCookieBanner from 'https://cdn.skypack.dev/@keepist/react-gdpr-cookie-banner';
</script>

README

React GDPR Cookie Banner

Build Status

A GDPR compliant Cookie Banner component for React.

Preview Preview

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:

Name Type Default Description
preferencesOptionInitiallyChecked bool false optional. Sets the inital state of the preferences checkbox
statisticsOptionInitiallyChecked bool false optional. Sets the inital state of the statistics checkbox
marketingOptionInitiallyChecked bool false optional. Sets the inital state of the marketing 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

Name Type Default Description
className string optional. Classes
message string Required. Custom text of the banner
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
acceptAllButtonText string "Accept All" optional. Text for the acceptAll button
acceptSelectionButtonText string "Accept Selection" optional. Text for the acceptSelection button
showAcceptSelectionButton bool false optional. Show or hide the acceptSelection 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
preferencesOptionInitiallyChecked bool false optional. Sets the inital state of the preferences checkbox
statisticsOptionInitiallyChecked bool false optional. Sets the inital state of the statistics checkbox
marketingOptionInitiallyChecked bool false optional. Sets the inital state of the marketing checkbox
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

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)

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

Classname Description
react-cookie-law-accept-all-btn Styles the Accept All-Button
react-cookie-law-accept-selection-btn Styles the Accept Selection-Button

Example of a custom style:

Preview

Test

yarn test

or

npm test

Author

Original Author

Palmabit-IT

Improvements

Daniel Engelhardt (keepist.de)

Licence

See the MIT License