mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-08-23 17:44:55 +02:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: mastermindzh:6.2.3
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1
...
compare: mastermindzh:6.3.0
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1

5 Commits
6.2.3 ... 6.3.0

Author SHA1 Message Date
Mastermindzh
696200262e Added the (optional) scrolling effect back in as it is declared legal in some countries now. 2021-08-11 11:14:18 +02:00
Mastermindzh
e52811b3a8 release $npm_package_version 2021-05-24 18:27:42 +02:00
dependabot[bot]
814202780b Bump lodash from 4.17.20 to 4.17.21 (#114) 
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
 2021-05-12 09:08:43 +02:00
dependabot[bot]
d01995e3b4 Bump ssri from 8.0.0 to 8.0.1 (#111) 
Bumps [ssri](https://github.com/npm/ssri) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/npm/ssri/releases)
- [Changelog](https://github.com/npm/ssri/blob/latest/CHANGELOG.md)
- [Commits](https://github.com/npm/ssri/compare/v8.0.0...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
 2021-04-12 13:15:52 +02:00
Mastermindzh
56de263dce release $npm_package_version 2021-02-19 10:43:49 +01:00
8 changed files with 9766 additions and 3078 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
node_modules node_modules
build/index.js.LICENSE.txt build/index.js.LICENSE.txt
example/*

4
CHANGELOG.md
View File

@@ -5,6 +5,10 @@ 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/), 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). 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)] ## [[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 - Added support for IE11, the webpack generated runtime-code should not use arrow functions

108
README.md
View File

@@ -84,12 +84,17 @@ You can optionally set some props like this (next chapter will show all props):
</CookieConsent> </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 ```js
<CookieConsent <CookieConsent
onAccept={() => { onAccept={(acceptedByScrolling) => {
alert("Accept was triggered by clicking the Accept button"); 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> ></CookieConsent>
``` ```
@@ -117,45 +122,47 @@ console.log(getCookieConsentValue());
## Props ## Props
| Prop | Type | Default value | Description | | 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. | | 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 | | 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) | | 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) | | 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 | | 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 | | 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. | | 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. | | 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. | | 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" | | 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. | | 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. | | 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. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| expires | number | 365 | Number of days before the cookie expires. | | expires | number | 365 | Number of days before the cookie expires. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | 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. | | overlay | boolean | false | Whether to show a page obscuring overlay or not. |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the button | | buttonClasses | string | "" | CSS classes to apply to the button |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| buttonId | string | "" | Id to apply to the button | | buttonId | string | "" | Id to apply to the button |
| declineButtonId | string | "" | Id to apply to the decline button | | declineButtonId | string | "" | Id to apply to the decline button |
| contentClasses | string | "" | CSS classes to apply to the content | | contentClasses | string | "" | CSS classes to apply to the content |
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
| style | object | [look at source][style] | React styling object for the bar. | | style | object | [look at source][style] | React styling object for the bar. |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | 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. | | 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. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | 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) | | 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 | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. | | ButtonComponent | React component | button | React Component to render as a button. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | | 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 | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline 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 ## Debugging it
@@ -229,6 +236,23 @@ Which results in:
![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true) ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
#### 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 #### Flipping the buttons
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around: If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

51
build/index.js
View File

@@ -1,15 +1,25 @@
/*! For license information please see index.js.LICENSE.txt */ /*! For license information please see index.js.LICENSE.txt */
module.exports = (() => { module.exports = (function () {
var e = { var e = {
866: (e, t, n) => { 866: function (e, t, n) {
"use strict"; "use strict";
n.r(t), n.r(t),
n.d(t, { n.d(t, {
Cookies: () => s(), Cookies: function () {
OPTIONS: () => h, return s();
SAME_SITE_OPTIONS: () => m, },
default: () => j, OPTIONS: function () {
getCookieConsentValue: () => g, return h;
},
SAME_SITE_OPTIONS: function () {
return m;
},
default: function () {
return j;
},
getCookieConsentValue: function () {
return g;
},
}); });
const o = require("react"); const o = require("react");
var r = n.n(o), var r = n.n(o),
@@ -509,7 +519,7 @@ module.exports = (() => {
}); });
const j = x; const j = x;
}, },
808: (e, t, n) => { 808: function (e, t, n) {
var o, r, i; var o, r, i;
void 0 === void 0 ===
(r = (r =
@@ -594,7 +604,7 @@ module.exports = (() => {
: o) || (e.exports = r), : o) || (e.exports = r),
(e.exports = i()); (e.exports = i());
}, },
703: (e, t, n) => { 703: function (e, t, n) {
"use strict"; "use strict";
var o = n(414); var o = n(414);
function r() {} function r() {}
@@ -638,10 +648,10 @@ module.exports = (() => {
return (n.PropTypes = n), n; return (n.PropTypes = n), n;
}); });
}, },
697: (e, t, n) => { 697: function (e, t, n) {
e.exports = n(703)(); e.exports = n(703)();
}, },
414: (e) => { 414: function (e) {
"use strict"; "use strict";
e.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"; 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 e[o](r, r.exports, n), r.exports;
} }
return ( return (
(n.n = (e) => { (n.n = function (e) {
var t = e && e.__esModule ? () => e.default : () => e; var t =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return n.d(t, { a: t }), t; return n.d(t, { a: t }), t;
}), }),
(n.d = (e, t) => { (n.d = function (e, t) {
for (var o in 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(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.o = function (e, t) {
(n.r = (e) => { return Object.prototype.hasOwnProperty.call(e, t);
}),
(n.r = function (e) {
"undefined" != typeof Symbol && "undefined" != typeof Symbol &&
Symbol.toStringTag && Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),

12618
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -4,7 +4,7 @@
"name": "Rick van Lieshout", "name": "Rick van Lieshout",
"email": "info@rickvanlieshout.com" "email": "info@rickvanlieshout.com"
}, },
"version": "6.2.2", "version": "6.2.4",
"description": "A small, simple and customizable cookie consent bar for use in React applications.", "description": "A small, simple and customizable cookie consent bar for use in React applications.",
"main": "build/index.js", "main": "build/index.js",
"types": "build/index.d.ts", "types": "build/index.d.ts",

4
src/index.d.ts vendored
View File

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: Function; onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -39,6 +39,8 @@ export interface CookieConsentProps {
overlayStyle?: object; overlayStyle?: object;
ariaAcceptLabel?: string; ariaAcceptLabel?: string;
ariaDeclineLabel?: string; ariaDeclineLabel?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

56
src/index.js
View File

@@ -116,21 +116,31 @@ class CookieConsent extends Component {
// if cookie undefined or debug // if cookie undefined or debug
if (this.getCookieValue() === undefined || debug) { if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true }); 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 * Set a persistent accept cookie
*/ */
accept() { accept(acceptedByScrolling = false) {
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props; const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
this.setCookie(cookieName, cookieValue); this.setCookie(cookieName, cookieValue);
onAccept(); onAccept(acceptedByScrolling ?? false);
if (hideOnAccept) { if (hideOnAccept) {
this.setState({ visible: false }); this.setState({ visible: false });
this.removeScrollListener();
} }
} }
@@ -138,13 +148,8 @@ class CookieConsent extends Component {
* Set a persistent decline cookie * Set a persistent decline cookie
*/ */
decline() { decline() {
const { const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
cookieName, this.props;
declineCookieValue,
hideOnDecline,
onDecline,
setDeclineCookie,
} = this.props;
if (setDeclineCookie) { if (setDeclineCookie) {
this.setCookie(cookieName, declineCookieValue); this.setCookie(cookieName, declineCookieValue);
@@ -191,6 +196,35 @@ class CookieConsent extends Component {
return getCookieConsentValue(cookieName); 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() { render() {
// If the bar shouldn't be visible don't render anything. // If the bar shouldn't be visible don't render anything.
if (!this.state.visible) { if (!this.state.visible) {
@@ -369,6 +403,8 @@ CookieConsent.propTypes = {
overlayStyle: PropTypes.object, overlayStyle: PropTypes.object,
ariaAcceptLabel: PropTypes.string, ariaAcceptLabel: PropTypes.string,
ariaDeclineLabel: PropTypes.string, ariaDeclineLabel: PropTypes.string,
acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@@ -403,6 +439,8 @@ CookieConsent.defaultProps = {
overlayClasses: "", overlayClasses: "",
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
}; };
export default CookieConsent; export default CookieConsent;