mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 09:35:04 +02:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 696200262e | |||
| e52811b3a8 | |||
|
814202780b | ||
|
|
d01995e3b4 | ||
| 56de263dce | |||
|
0228e7f32c | ||
| 50216eec3c | |||
| 3e9e988e96 | |||
| 1c6f335500 | |||
| eb45e7a652 | |||
| 26306f7490 | |||
| 7d8f52018d | |||
| a494066785 | |||
|
7f15b25e89 | ||
| 0f4893af4b |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
node_modules
|
||||
build/index.js.LICENSE.txt
|
||||
example/*
|
||||
|
||||
31
CHANGELOG.md
31
CHANGELOG.md
@@ -5,6 +5,37 @@ 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
|
||||
|
||||
## [[6.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.1.0)]
|
||||
|
||||
Added support for React 17
|
||||
|
||||
## [[6.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.0.0)]
|
||||
|
||||
### removed
|
||||
|
||||
Accepting by scrolling is no longer allowed and has thus been removed from the package.
|
||||
For details see [issue 88](https://github.com/Mastermindzh/react-cookie-consent/issues/88)
|
||||
|
||||
## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
|
||||
|
||||
### added
|
||||
|
||||
120
README.md
120
README.md
@@ -22,7 +22,7 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
|
||||
- [Using it](#using-it)
|
||||
- [Props](#props)
|
||||
- [Debugging it](#debugging-it)
|
||||
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
|
||||
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
|
||||
- [Styling it](#styling-it)
|
||||
- [Examples](#examples)
|
||||
- [Changing the bar background to red](#changing-the-bar-background-to-red)
|
||||
@@ -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>
|
||||
```
|
||||
@@ -105,47 +110,59 @@ If the decline button is enabled then the (onDecline) prop function can be used,
|
||||
></CookieConsent>
|
||||
```
|
||||
|
||||
### getting the cookies value in your own code
|
||||
|
||||
react-cookie-consent exports a function called `getCookieConsentValue`. You can use it in your own code like so:
|
||||
|
||||
```js
|
||||
import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
|
||||
|
||||
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
|
||||
|
||||
@@ -219,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 };
|
||||
|
||||
170
build/index.js
170
build/index.js
@@ -1,14 +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: () => O,
|
||||
SAME_SITE_OPTIONS: () => v,
|
||||
default: () => S,
|
||||
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),
|
||||
@@ -59,7 +70,7 @@ module.exports = (() => {
|
||||
var n = null != arguments[t] ? arguments[t] : {};
|
||||
t % 2
|
||||
? p(Object(n), !0).forEach(function (t) {
|
||||
y(e, t, n[t]);
|
||||
b(e, t, n[t]);
|
||||
})
|
||||
: Object.getOwnPropertyDescriptors
|
||||
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
|
||||
@@ -69,7 +80,7 @@ module.exports = (() => {
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function y(e, t, n) {
|
||||
function b(e, t, n) {
|
||||
return (
|
||||
t in e
|
||||
? Object.defineProperty(e, t, {
|
||||
@@ -82,7 +93,7 @@ module.exports = (() => {
|
||||
e
|
||||
);
|
||||
}
|
||||
function b(e, t) {
|
||||
function y(e, t) {
|
||||
for (var n = 0; n < t.length; n++) {
|
||||
var o = t[n];
|
||||
(o.enumerable = o.enumerable || !1),
|
||||
@@ -98,7 +109,7 @@ module.exports = (() => {
|
||||
return (e.__proto__ = t), e;
|
||||
})(e, t);
|
||||
}
|
||||
function m(e, t) {
|
||||
function v(e, t) {
|
||||
return !t || ("object" !== l(t) && "function" != typeof t)
|
||||
? (function (e) {
|
||||
if (void 0 === e)
|
||||
@@ -109,22 +120,31 @@ module.exports = (() => {
|
||||
})(e)
|
||||
: t;
|
||||
}
|
||||
function h(e) {
|
||||
return (h = Object.setPrototypeOf
|
||||
function O(e) {
|
||||
return (O = Object.setPrototypeOf
|
||||
? Object.getPrototypeOf
|
||||
: function (e) {
|
||||
return e.__proto__ || Object.getPrototypeOf(e);
|
||||
})(e);
|
||||
}
|
||||
var O = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
|
||||
v = { STRICT: "strict", LAX: "lax", NONE: "none" },
|
||||
g = function (e) {
|
||||
var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
|
||||
m = { STRICT: "strict", LAX: "lax", NONE: "none" },
|
||||
g = function () {
|
||||
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : C,
|
||||
t = s().get(e);
|
||||
return void 0 === t && (t = s().get(S(e))), t;
|
||||
},
|
||||
S = function (e) {
|
||||
return "".concat(e, "-legacy");
|
||||
},
|
||||
C = "CookieConsent",
|
||||
k = function (e) {
|
||||
var t = e.condition,
|
||||
n = e.wrapper,
|
||||
o = e.children;
|
||||
return t ? n(o) : o;
|
||||
},
|
||||
C = (function (e) {
|
||||
x = (function (e) {
|
||||
!(function (e, t) {
|
||||
if ("function" != typeof t && null !== t)
|
||||
throw new TypeError("Super expression must either be null or a function");
|
||||
@@ -153,12 +173,12 @@ module.exports = (() => {
|
||||
})()),
|
||||
function () {
|
||||
var e,
|
||||
t = h(o);
|
||||
t = O(o);
|
||||
if (i) {
|
||||
var n = h(this).constructor;
|
||||
var n = O(this).constructor;
|
||||
e = Reflect.construct(t, arguments, n);
|
||||
} else e = t.apply(this, arguments);
|
||||
return m(this, e);
|
||||
return v(this, e);
|
||||
});
|
||||
function a(e) {
|
||||
var t;
|
||||
@@ -250,12 +270,6 @@ module.exports = (() => {
|
||||
o && this.setState({ visible: !1 });
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "getLegacyCookieName",
|
||||
value: function (e) {
|
||||
return "".concat(e, "-legacy");
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "setCookie",
|
||||
value: function (e, t) {
|
||||
@@ -266,15 +280,14 @@ module.exports = (() => {
|
||||
c = this.props.cookieSecurity;
|
||||
void 0 === c && (c = !location || "https:" === location.protocol);
|
||||
var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
|
||||
i === v.NONE && s().set(this.getLegacyCookieName(e), t, a), s().set(e, t, a);
|
||||
i === m.NONE && s().set(S(e), t, a), s().set(e, t, a);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "getCookieValue",
|
||||
value: function () {
|
||||
var e = this.props.cookieName,
|
||||
t = s().get(e);
|
||||
return void 0 === t && (t = s().get(this.getLegacyCookieName(e))), t;
|
||||
var e = this.props.cookieName;
|
||||
return g(e);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -291,15 +304,15 @@ module.exports = (() => {
|
||||
s = t.disableStyles,
|
||||
l = t.buttonText,
|
||||
p = t.declineButtonText,
|
||||
y = t.containerClasses,
|
||||
b = t.contentClasses,
|
||||
b = t.containerClasses,
|
||||
y = t.contentClasses,
|
||||
d = t.buttonClasses,
|
||||
m = t.buttonWrapperClasses,
|
||||
h = t.declineButtonClasses,
|
||||
v = t.buttonId,
|
||||
C = t.declineButtonId,
|
||||
v = t.buttonWrapperClasses,
|
||||
O = t.declineButtonClasses,
|
||||
m = t.buttonId,
|
||||
g = t.declineButtonId,
|
||||
S = t.disableButtonStyles,
|
||||
k = t.enableDeclineButton,
|
||||
C = t.enableDeclineButton,
|
||||
x = t.flipButtons,
|
||||
j = t.ButtonComponent,
|
||||
T = t.overlay,
|
||||
@@ -308,43 +321,43 @@ module.exports = (() => {
|
||||
P = t.ariaAcceptLabel,
|
||||
D = t.ariaDeclineLabel,
|
||||
E = {},
|
||||
N = {},
|
||||
I = {},
|
||||
N = {},
|
||||
_ = {},
|
||||
R = {};
|
||||
switch (
|
||||
(s
|
||||
? ((E = u({}, o)),
|
||||
(N = u({}, i)),
|
||||
(I = u({}, c)),
|
||||
(I = u({}, i)),
|
||||
(N = u({}, c)),
|
||||
(_ = u({}, a)),
|
||||
(R = u({}, B)))
|
||||
: ((E = u({}, f(f({}, this.state.style), o))),
|
||||
(_ = u({}, f(f({}, this.state.contentStyle), a))),
|
||||
(R = u({}, f(f({}, this.state.overlayStyle), B))),
|
||||
S
|
||||
? ((N = u({}, i)), (I = u({}, c)))
|
||||
: ((N = u({}, f(f({}, this.state.buttonStyle), i))),
|
||||
(I = u({}, f(f({}, this.state.declineButtonStyle), c))))),
|
||||
? ((I = u({}, i)), (N = u({}, c)))
|
||||
: ((I = u({}, f(f({}, this.state.buttonStyle), i))),
|
||||
(N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
|
||||
n)
|
||||
) {
|
||||
case O.TOP:
|
||||
case h.TOP:
|
||||
E.top = "0";
|
||||
break;
|
||||
case O.BOTTOM:
|
||||
case h.BOTTOM:
|
||||
E.bottom = "0";
|
||||
}
|
||||
var A = [];
|
||||
return (
|
||||
k &&
|
||||
C &&
|
||||
A.push(
|
||||
r().createElement(
|
||||
j,
|
||||
{
|
||||
key: "declineButton",
|
||||
style: I,
|
||||
className: h,
|
||||
id: C,
|
||||
style: N,
|
||||
className: O,
|
||||
id: g,
|
||||
"aria-label": D,
|
||||
onClick: function () {
|
||||
e.decline();
|
||||
@@ -358,9 +371,9 @@ module.exports = (() => {
|
||||
j,
|
||||
{
|
||||
key: "acceptButton",
|
||||
style: N,
|
||||
style: I,
|
||||
className: d,
|
||||
id: v,
|
||||
id: m,
|
||||
"aria-label": P,
|
||||
onClick: function () {
|
||||
e.accept();
|
||||
@@ -371,7 +384,7 @@ module.exports = (() => {
|
||||
),
|
||||
x && A.reverse(),
|
||||
r().createElement(
|
||||
g,
|
||||
k,
|
||||
{
|
||||
condition: T,
|
||||
wrapper: function (e) {
|
||||
@@ -380,11 +393,11 @@ module.exports = (() => {
|
||||
},
|
||||
r().createElement(
|
||||
"div",
|
||||
{ className: "".concat(y), style: E },
|
||||
r().createElement("div", { style: _, className: b }, this.props.children),
|
||||
{ className: "".concat(b), style: E },
|
||||
r().createElement("div", { style: _, className: y }, this.props.children),
|
||||
r().createElement(
|
||||
"div",
|
||||
{ className: "".concat(m) },
|
||||
{ className: "".concat(v) },
|
||||
A.map(function (e) {
|
||||
return e;
|
||||
})
|
||||
@@ -394,19 +407,19 @@ module.exports = (() => {
|
||||
);
|
||||
},
|
||||
},
|
||||
]) && b(t.prototype, n),
|
||||
]) && y(t.prototype, n),
|
||||
a
|
||||
);
|
||||
})(o.Component);
|
||||
(C.propTypes = {
|
||||
(x.propTypes = {
|
||||
location: c().oneOf(
|
||||
Object.keys(O).map(function (e) {
|
||||
return O[e];
|
||||
Object.keys(h).map(function (e) {
|
||||
return h[e];
|
||||
})
|
||||
),
|
||||
sameSite: c().oneOf(
|
||||
Object.keys(v).map(function (e) {
|
||||
return v[e];
|
||||
Object.keys(m).map(function (e) {
|
||||
return m[e];
|
||||
})
|
||||
),
|
||||
style: c().object,
|
||||
@@ -446,14 +459,14 @@ module.exports = (() => {
|
||||
ariaAcceptLabel: c().string,
|
||||
ariaDeclineLabel: c().string,
|
||||
}),
|
||||
(C.defaultProps = {
|
||||
(x.defaultProps = {
|
||||
disableStyles: !1,
|
||||
hideOnAccept: !0,
|
||||
hideOnDecline: !0,
|
||||
location: O.BOTTOM,
|
||||
location: h.BOTTOM,
|
||||
onAccept: function () {},
|
||||
onDecline: function () {},
|
||||
cookieName: "CookieConsent",
|
||||
cookieName: C,
|
||||
cookieValue: !0,
|
||||
declineCookieValue: !1,
|
||||
setDeclineCookie: !0,
|
||||
@@ -472,7 +485,7 @@ module.exports = (() => {
|
||||
disableButtonStyles: !1,
|
||||
enableDeclineButton: !1,
|
||||
flipButtons: !1,
|
||||
sameSite: v.LAX,
|
||||
sameSite: m.LAX,
|
||||
ButtonComponent: function (e) {
|
||||
var t = e.children,
|
||||
n = (function (e, t) {
|
||||
@@ -504,9 +517,9 @@ module.exports = (() => {
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
});
|
||||
const S = C;
|
||||
const j = x;
|
||||
},
|
||||
808: (e, t, n) => {
|
||||
808: function (e, t, n) {
|
||||
var o, r, i;
|
||||
void 0 ===
|
||||
(r =
|
||||
@@ -591,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() {}
|
||||
@@ -635,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";
|
||||
},
|
||||
@@ -650,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.0.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",
|
||||
@@ -21,7 +21,8 @@
|
||||
"patch": "npm --no-git-tag-version version patch",
|
||||
"minor": "npm --no-git-tag-version version minor",
|
||||
"major": "npm --no-git-tag-version version major",
|
||||
"release": "npm run build && git add -A && PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag $PACKAGE_VERSION && git commit -m 'release $PACKAGE_VERSION' && git push && git push --tags && npm publish",
|
||||
"preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )",
|
||||
"release": "npm run build && git add -A && git tag $npm_package_version && git commit -m 'release $npm_package_version' && git push && git push --tags && npm publish",
|
||||
"release-patch": "npm run patch && npm run release",
|
||||
"release-minor": "npm run minor && npm run release",
|
||||
"release-major": "npm run major && npm run release"
|
||||
|
||||
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 };
|
||||
|
||||
106
src/index.js
106
src/index.js
@@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
|
||||
NONE: "none",
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 const getCookieConsentValue = (name = defaultCookieConsentName) => {
|
||||
let cookieValue = Cookies.get(name);
|
||||
|
||||
// if the cookieValue is undefined check for the legacy cookie
|
||||
if (cookieValue === undefined) {
|
||||
cookieValue = Cookies.get(getLegacyCookieName(name));
|
||||
}
|
||||
return cookieValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the legacy cookie name by the regular cookie name
|
||||
* @param {string} name of cookie to get
|
||||
*/
|
||||
const getLegacyCookieName = (name) => {
|
||||
return `${name}-legacy`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Default name of the cookie which is set by CookieConsent
|
||||
*/
|
||||
const defaultCookieConsentName = "CookieConsent";
|
||||
|
||||
/**
|
||||
* A function to wrap elements with a "wrapper" on a condition
|
||||
* @param {object} wrappingOptions
|
||||
@@ -87,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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,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);
|
||||
@@ -128,14 +162,6 @@ class CookieConsent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the legacy cookie name by the regular cookie name
|
||||
* @param {string} name of cookie to get
|
||||
*/
|
||||
getLegacyCookieName(name) {
|
||||
return `${name}-legacy`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to set the consent cookie based on the provided variables
|
||||
* Sets two cookies to handle incompatible browsers, more details:
|
||||
@@ -153,7 +179,7 @@ class CookieConsent extends Component {
|
||||
|
||||
// Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
if (sameSite === SAME_SITE_OPTIONS.NONE) {
|
||||
Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
|
||||
Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
|
||||
}
|
||||
|
||||
// set the regular cookie
|
||||
@@ -167,16 +193,38 @@ class CookieConsent extends Component {
|
||||
*/
|
||||
getCookieValue() {
|
||||
const { cookieName } = this.props;
|
||||
|
||||
let cookieValue = Cookies.get(cookieName);
|
||||
|
||||
// if the cookieValue is undefined check for the legacy cookie
|
||||
if (cookieValue === undefined) {
|
||||
cookieValue = Cookies.get(this.getLegacyCookieName(cookieName));
|
||||
}
|
||||
return cookieValue;
|
||||
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) {
|
||||
@@ -355,6 +403,8 @@ CookieConsent.propTypes = {
|
||||
overlayStyle: PropTypes.object,
|
||||
ariaAcceptLabel: PropTypes.string,
|
||||
ariaDeclineLabel: PropTypes.string,
|
||||
acceptOnScroll: PropTypes.bool,
|
||||
acceptOnScrollPercentage: PropTypes.number,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@@ -364,7 +414,7 @@ CookieConsent.defaultProps = {
|
||||
location: OPTIONS.BOTTOM,
|
||||
onAccept: () => {},
|
||||
onDecline: () => {},
|
||||
cookieName: "CookieConsent",
|
||||
cookieName: defaultCookieConsentName,
|
||||
cookieValue: true,
|
||||
declineCookieValue: false,
|
||||
setDeclineCookie: true,
|
||||
@@ -389,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