mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 17:44:55 +02:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 696200262e | |||
| e52811b3a8 | |||
|
814202780b | ||
|
|
d01995e3b4 | ||
| 56de263dce | |||
|
0228e7f32c | ||
| 50216eec3c | |||
| 3e9e988e96 | |||
| 1c6f335500 | |||
| eb45e7a652 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
node_modules
|
||||
build/index.js.LICENSE.txt
|
||||
example/*
|
||||
|
||||
16
CHANGELOG.md
16
CHANGELOG.md
@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [[6.3.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3))]
|
||||
|
||||
- Added the (optional) scrolling effect back in as it is declared legal in some countries now.
|
||||
|
||||
## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)]
|
||||
|
||||
- Added support for IE11, the webpack generated runtime-code should not use arrow functions
|
||||
|
||||
## [[6.2.2](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.2)]
|
||||
|
||||
- Fixed the return type of getCookieConsentValue in the dts file.
|
||||
|
||||
## [[6.2.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.1)]
|
||||
|
||||
Added the `getCookieConsentValue` to the dts file.
|
||||
|
||||
## [[6.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.0)]
|
||||
|
||||
Added the exported function `getCookieConsentValue` to get the cookie value from custom code
|
||||
|
||||
108
README.md
108
README.md
@@ -84,12 +84,17 @@ You can optionally set some props like this (next chapter will show all props):
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:
|
||||
One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property `acceptedByScrolling` to indicate if the acceptance was triggered by the user scrolling You can provide a function like so:
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
onAccept={() => {
|
||||
alert("Accept was triggered by clicking the Accept button");
|
||||
onAccept={(acceptedByScrolling) => {
|
||||
if (acceptedByScrolling) {
|
||||
// triggered if user scrolls past threshold
|
||||
alert("Accept was triggered by user scrolling");
|
||||
} else {
|
||||
alert("Accept was triggered by clicking the Accept button");
|
||||
}
|
||||
}}
|
||||
></CookieConsent>
|
||||
```
|
||||
@@ -117,45 +122,47 @@ console.log(getCookieConsentValue());
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default value | Description |
|
||||
| -------------------- | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. |
|
||||
| children | string or React component | | Content to appear inside the bar |
|
||||
| disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
|
||||
| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) |
|
||||
| buttonText | string or React component | "I understand" | Text to appear on the button |
|
||||
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
|
||||
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
|
||||
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
|
||||
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
|
||||
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
|
||||
| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
|
||||
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
|
||||
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
|
||||
| overlay | boolean | false | Whether to show a page obscuring overlay or not. |
|
||||
| containerClasses | string | "" | CSS classes to apply to the surrounding container |
|
||||
| buttonClasses | string | "" | CSS classes to apply to the button |
|
||||
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
|
||||
| declineButtonClasses | string | "" | CSS classes to apply to the decline button |
|
||||
| buttonId | string | "" | Id to apply to the button |
|
||||
| declineButtonId | string | "" | Id to apply to the decline button |
|
||||
| contentClasses | string | "" | CSS classes to apply to the content |
|
||||
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
|
||||
| style | object | [look at source][style] | React styling object for the bar. |
|
||||
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
|
||||
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
|
||||
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
|
||||
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
|
||||
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
|
||||
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
|
||||
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
|
||||
| ButtonComponent | React component | button | React Component to render as a button. |
|
||||
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
|
||||
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
|
||||
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
|
||||
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
|
||||
| Prop | Type | Default value | Description |
|
||||
| ------------------------ | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. |
|
||||
| children | string or React component | | Content to appear inside the bar |
|
||||
| disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
|
||||
| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) |
|
||||
| buttonText | string or React component | "I understand" | Text to appear on the button |
|
||||
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
|
||||
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
|
||||
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
|
||||
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
|
||||
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
|
||||
| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
|
||||
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
|
||||
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
|
||||
| overlay | boolean | false | Whether to show a page obscuring overlay or not. |
|
||||
| containerClasses | string | "" | CSS classes to apply to the surrounding container |
|
||||
| buttonClasses | string | "" | CSS classes to apply to the button |
|
||||
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
|
||||
| declineButtonClasses | string | "" | CSS classes to apply to the decline button |
|
||||
| buttonId | string | "" | Id to apply to the button |
|
||||
| declineButtonId | string | "" | Id to apply to the decline button |
|
||||
| contentClasses | string | "" | CSS classes to apply to the content |
|
||||
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
|
||||
| style | object | [look at source][style] | React styling object for the bar. |
|
||||
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
|
||||
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
|
||||
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
|
||||
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
|
||||
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
|
||||
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
|
||||
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
|
||||
| ButtonComponent | React component | button | React Component to render as a button. |
|
||||
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
|
||||
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
|
||||
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
|
||||
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
|
||||
| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |
|
||||
| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled |
|
||||
|
||||
## Debugging it
|
||||
|
||||
@@ -229,6 +236,23 @@ Which results in:
|
||||
|
||||
|
||||
|
||||
#### Accept on scroll
|
||||
|
||||
You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.
|
||||
It is legal in some use-cases, [Italy](https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9679893) being one of them. Consult your legislation on whether this is allowed.
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
acceptOnScroll={true}
|
||||
acceptOnScrollPercentage={50}
|
||||
onAccept={(byScroll) => {
|
||||
alert(`consent given. \n\n By scrolling? ${byScroll}`);
|
||||
}}
|
||||
>
|
||||
Hello scroller :)
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
#### Flipping the buttons
|
||||
|
||||
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:
|
||||
|
||||
8
build/index.d.ts
vendored
8
build/index.d.ts
vendored
@@ -43,4 +43,12 @@ export interface CookieConsentProps {
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
/**
|
||||
* Returns the value of the consent cookie
|
||||
* Retrieves the regular value first and if not found the legacy one according
|
||||
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
* @param {*} name optional name of the cookie
|
||||
*/
|
||||
export function getCookieConsentValue(name?: string): string;
|
||||
|
||||
export { Cookies };
|
||||
|
||||
@@ -1,15 +1,25 @@
|
||||
/*! For license information please see index.js.LICENSE.txt */
|
||||
module.exports = (() => {
|
||||
module.exports = (function () {
|
||||
var e = {
|
||||
866: (e, t, n) => {
|
||||
866: function (e, t, n) {
|
||||
"use strict";
|
||||
n.r(t),
|
||||
n.d(t, {
|
||||
Cookies: () => s(),
|
||||
OPTIONS: () => h,
|
||||
SAME_SITE_OPTIONS: () => m,
|
||||
default: () => j,
|
||||
getCookieConsentValue: () => g,
|
||||
Cookies: function () {
|
||||
return s();
|
||||
},
|
||||
OPTIONS: function () {
|
||||
return h;
|
||||
},
|
||||
SAME_SITE_OPTIONS: function () {
|
||||
return m;
|
||||
},
|
||||
default: function () {
|
||||
return j;
|
||||
},
|
||||
getCookieConsentValue: function () {
|
||||
return g;
|
||||
},
|
||||
});
|
||||
const o = require("react");
|
||||
var r = n.n(o),
|
||||
@@ -509,7 +519,7 @@ module.exports = (() => {
|
||||
});
|
||||
const j = x;
|
||||
},
|
||||
808: (e, t, n) => {
|
||||
808: function (e, t, n) {
|
||||
var o, r, i;
|
||||
void 0 ===
|
||||
(r =
|
||||
@@ -594,7 +604,7 @@ module.exports = (() => {
|
||||
: o) || (e.exports = r),
|
||||
(e.exports = i());
|
||||
},
|
||||
703: (e, t, n) => {
|
||||
703: function (e, t, n) {
|
||||
"use strict";
|
||||
var o = n(414);
|
||||
function r() {}
|
||||
@@ -638,10 +648,10 @@ module.exports = (() => {
|
||||
return (n.PropTypes = n), n;
|
||||
});
|
||||
},
|
||||
697: (e, t, n) => {
|
||||
697: function (e, t, n) {
|
||||
e.exports = n(703)();
|
||||
},
|
||||
414: (e) => {
|
||||
414: function (e) {
|
||||
"use strict";
|
||||
e.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
|
||||
},
|
||||
@@ -653,16 +663,25 @@ module.exports = (() => {
|
||||
return e[o](r, r.exports, n), r.exports;
|
||||
}
|
||||
return (
|
||||
(n.n = (e) => {
|
||||
var t = e && e.__esModule ? () => e.default : () => e;
|
||||
(n.n = function (e) {
|
||||
var t =
|
||||
e && e.__esModule
|
||||
? function () {
|
||||
return e.default;
|
||||
}
|
||||
: function () {
|
||||
return e;
|
||||
};
|
||||
return n.d(t, { a: t }), t;
|
||||
}),
|
||||
(n.d = (e, t) => {
|
||||
(n.d = function (e, t) {
|
||||
for (var o in t)
|
||||
n.o(t, o) && !n.o(e, o) && Object.defineProperty(e, o, { enumerable: !0, get: t[o] });
|
||||
}),
|
||||
(n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)),
|
||||
(n.r = (e) => {
|
||||
(n.o = function (e, t) {
|
||||
return Object.prototype.hasOwnProperty.call(e, t);
|
||||
}),
|
||||
(n.r = function (e) {
|
||||
"undefined" != typeof Symbol &&
|
||||
Symbol.toStringTag &&
|
||||
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
|
||||
|
||||
12618
package-lock.json
generated
12618
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "6.1.0",
|
||||
"version": "6.2.4",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
|
||||
12
src/index.d.ts
vendored
12
src/index.d.ts
vendored
@@ -12,7 +12,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
onAccept?: Function;
|
||||
onAccept?: (acceptedByScrolling?: boolean) => void;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
declineButtonText?: Function | React.ReactNode;
|
||||
@@ -39,8 +39,18 @@ export interface CookieConsentProps {
|
||||
overlayStyle?: object;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
/**
|
||||
* Returns the value of the consent cookie
|
||||
* Retrieves the regular value first and if not found the legacy one according
|
||||
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
* @param {*} name optional name of the cookie
|
||||
*/
|
||||
export function getCookieConsentValue(name?: string): string;
|
||||
|
||||
export { Cookies };
|
||||
|
||||
56
src/index.js
56
src/index.js
@@ -116,21 +116,31 @@ class CookieConsent extends Component {
|
||||
// if cookie undefined or debug
|
||||
if (this.getCookieValue() === undefined || debug) {
|
||||
this.setState({ visible: true });
|
||||
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
|
||||
if (this.props.acceptOnScroll) {
|
||||
window.addEventListener("scroll", this.handleScroll, { passive: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// remove listener if still set
|
||||
this.removeScrollListener();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a persistent accept cookie
|
||||
*/
|
||||
accept() {
|
||||
accept(acceptedByScrolling = false) {
|
||||
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
|
||||
|
||||
this.setCookie(cookieName, cookieValue);
|
||||
|
||||
onAccept();
|
||||
onAccept(acceptedByScrolling ?? false);
|
||||
|
||||
if (hideOnAccept) {
|
||||
this.setState({ visible: false });
|
||||
this.removeScrollListener();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,13 +148,8 @@ class CookieConsent extends Component {
|
||||
* Set a persistent decline cookie
|
||||
*/
|
||||
decline() {
|
||||
const {
|
||||
cookieName,
|
||||
declineCookieValue,
|
||||
hideOnDecline,
|
||||
onDecline,
|
||||
setDeclineCookie,
|
||||
} = this.props;
|
||||
const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
|
||||
this.props;
|
||||
|
||||
if (setDeclineCookie) {
|
||||
this.setCookie(cookieName, declineCookieValue);
|
||||
@@ -191,6 +196,35 @@ class CookieConsent extends Component {
|
||||
return getCookieConsentValue(cookieName);
|
||||
}
|
||||
|
||||
/**
|
||||
* checks whether scroll has exceeded set amount and fire accept if so.
|
||||
*/
|
||||
handleScroll = () => {
|
||||
const { acceptOnScrollPercentage } = this.props;
|
||||
|
||||
// (top / height) - height * 100
|
||||
let rootNode = document.documentElement,
|
||||
body = document.body,
|
||||
top = "scrollTop",
|
||||
height = "scrollHeight";
|
||||
|
||||
let percentage =
|
||||
((rootNode[top] || body[top]) /
|
||||
((rootNode[height] || body[height]) - rootNode.clientHeight)) *
|
||||
100;
|
||||
|
||||
if (percentage > acceptOnScrollPercentage) {
|
||||
this.accept(true);
|
||||
}
|
||||
};
|
||||
|
||||
removeScrollListener = () => {
|
||||
const { acceptOnScroll } = this.props;
|
||||
if (acceptOnScroll) {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
// If the bar shouldn't be visible don't render anything.
|
||||
if (!this.state.visible) {
|
||||
@@ -369,6 +403,8 @@ CookieConsent.propTypes = {
|
||||
overlayStyle: PropTypes.object,
|
||||
ariaAcceptLabel: PropTypes.string,
|
||||
ariaDeclineLabel: PropTypes.string,
|
||||
acceptOnScroll: PropTypes.bool,
|
||||
acceptOnScrollPercentage: PropTypes.number,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@@ -403,6 +439,8 @@ CookieConsent.defaultProps = {
|
||||
overlayClasses: "",
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
acceptOnScroll: false,
|
||||
acceptOnScrollPercentage: 25,
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
|
||||
@@ -7,6 +7,9 @@ module.exports = {
|
||||
path: path.resolve(__dirname, "build"),
|
||||
filename: "index.js",
|
||||
libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
|
||||
environment: {
|
||||
arrowFunction: false, // the generated runtime-code should not use arrow functions
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
||||
Reference in New Issue
Block a user