https://github.com/palmabit-it/react-cookie-law
React Cookie Law is a cookie-info banner compliance with the GDPR and the EU cookie law. It allows the user to give consent in a granular way.
https://github.com/palmabit-it/react-cookie-law
cookie cookie-banner cookie-consent gdpr gdpr-consent gdpr-cookie javascript react
Last synced: 4 months ago
JSON representation
React Cookie Law is a cookie-info banner compliance with the GDPR and the EU cookie law. It allows the user to give consent in a granular way.
- Host: GitHub
- URL: https://github.com/palmabit-it/react-cookie-law
- Owner: Palmabit-IT
- Created: 2018-09-16T21:36:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:50:59.000Z (over 2 years ago)
- Last Synced: 2025-06-09T05:02:34.298Z (4 months ago)
- Topics: cookie, cookie-banner, cookie-consent, gdpr, gdpr-consent, gdpr-cookie, javascript, react
- Language: JavaScript
- Homepage:
- Size: 1.76 MB
- Stars: 115
- Watchers: 4
- Forks: 53
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Cookie Law
[](https://badge.fury.io/js/%40palmabit%2Freact-cookie-law) [](https://travis-ci.org/Palmabit-IT/react-cookie-law) [](https://coveralls.io/github/Palmabit-IT/react-cookie-law?branch=master)
A React Cookie Banner component GDPR compliance.
## Install
```
yarn add @palmabit/react-cookie-law
```
or
```
npm install --save @palmabit/react-cookie-law
```
## Usage
```js
import { CookieBanner } from "@palmabit/react-cookie-law";
React.renderComponent(
{}}
onAcceptPreferences={() => {}}
onAcceptStatistics={() => {}}
onAcceptMarketing={() => {}}
/>
,
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
```js
```
|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](https://www.palmabit.com)
# Licence
[See the MIT License](http://opensource.org/licenses/MIT)