@keepist/react-gdpr-cookie-banner
Version:
GDPR compliant cookie banner for react
163 lines (121 loc) • 6.51 kB
Markdown
# React GDPR Cookie Banner
[](https://travis-ci.com/github/keepist/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:**
|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
```js
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
```js
<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:
## Test
```
yarn test
```
or
```
npm test
```
# Author
## Original Author
[Palmabit-IT](https://www.palmabit.com)
## Improvements
[Daniel Engelhardt (keepist.de)](https://www.keepist.de)
# Licence
[See the MIT License](http://opensource.org/licenses/MIT)