Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-cookie-consent

Package Overview
Dependencies
Maintainers
1
Versions
81
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cookie-consent - npm Package Compare versions

Comparing version 6.2.4 to 6.3.0

example/README.md

4

build/index.d.ts

@@ -15,3 +15,3 @@ import * as React from "react";

hideOnAccept?: boolean;
onAccept?: Function;
onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function;

@@ -43,2 +43,4 @@ buttonText?: Function | React.ReactNode;

ariaDeclineLabel?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
}

@@ -45,0 +47,0 @@

1245

build/index.js
/*! For license information please see index.js.LICENSE.txt */
module.exports = (function () {
!(function () {
var e = {
866: function (e, t, n) {
"use strict";
n.r(t),
n.d(t, {
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),
i = n(697),
c = n.n(i),
a = n(808),
s = n.n(a);
function l(e) {
return (l =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (e) {
return typeof e;
}
: function (e) {
return e &&
"function" == typeof Symbol &&
e.constructor === Symbol &&
e !== Symbol.prototype
? "symbol"
: typeof e;
})(e);
}
function u() {
return (u =
Object.assign ||
function (e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t];
for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
}
return e;
}).apply(this, arguments);
}
function p(e, t) {
var n = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
t &&
(o = o.filter(function (t) {
return Object.getOwnPropertyDescriptor(e, t).enumerable;
})),
n.push.apply(n, o);
}
return n;
}
function f(e) {
for (var t = 1; t < arguments.length; t++) {
var n = null != arguments[t] ? arguments[t] : {};
t % 2
? p(Object(n), !0).forEach(function (t) {
b(e, t, n[t]);
})
: Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
: p(Object(n)).forEach(function (t) {
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
});
}
return e;
}
function b(e, t, n) {
return (
t in e
? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0,
})
: (e[t] = n),
e
);
}
function y(e, t) {
for (var n = 0; n < t.length; n++) {
var o = t[n];
(o.enumerable = o.enumerable || !1),
(o.configurable = !0),
"value" in o && (o.writable = !0),
Object.defineProperty(e, o.key, o);
}
}
function d(e, t) {
return (d =
Object.setPrototypeOf ||
function (e, t) {
return (e.__proto__ = t), e;
})(e, t);
}
function v(e, t) {
return !t || ("object" !== l(t) && "function" != typeof t)
? (function (e) {
if (void 0 === e)
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
);
return e;
})(e)
: t;
}
function O(e) {
return (O = Object.setPrototypeOf
? Object.getPrototypeOf
: function (e) {
return e.__proto__ || Object.getPrototypeOf(e);
})(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;
},
x = (function (e) {
!(function (e, t) {
if ("function" != typeof t && null !== t)
throw new TypeError("Super expression must either be null or a function");
(e.prototype = Object.create(t && t.prototype, {
constructor: { value: e, writable: !0, configurable: !0 },
})),
t && d(e, t);
})(a, e);
var t,
n,
o,
i,
c =
((o = a),
(i = (function () {
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
if (Reflect.construct.sham) return !1;
if ("function" == typeof Proxy) return !0;
try {
return (
Date.prototype.toString.call(Reflect.construct(Date, [], function () {})), !0
);
} catch (e) {
return !1;
}
})()),
function () {
var e,
t = O(o);
if (i) {
var n = O(this).constructor;
e = Reflect.construct(t, arguments, n);
} else e = t.apply(this, arguments);
return v(this, e);
});
function a(e) {
var t;
return (
(function (e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
})(this, a),
((t = c.call(this, e)).state = {
visible: !1,
style: {
alignItems: "baseline",
background: "#353535",
color: "white",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
left: "0",
position: "fixed",
width: "100%",
zIndex: "999",
},
buttonStyle: {
background: "#ffd42d",
border: "0",
borderRadius: "0px",
boxShadow: "none",
color: "black",
cursor: "pointer",
flex: "0 0 auto",
padding: "5px 10px",
margin: "15px",
},
declineButtonStyle: {
background: "#c12a2a",
border: "0",
borderRadius: "0px",
boxShadow: "none",
color: "#e5e5e5",
cursor: "pointer",
flex: "0 0 auto",
padding: "5px 10px",
margin: "15px",
},
contentStyle: { flex: "1 0 300px", margin: "15px" },
overlayStyle: {
position: "fixed",
left: 0,
top: 0,
width: "100%",
height: "100%",
zIndex: "999",
backgroundColor: "rgba(0,0,0,0.3)",
},
}),
t
);
}
return (
(t = a),
(n = [
{
key: "componentDidMount",
value: function () {
var e = this.props.debug;
(void 0 === this.getCookieValue() || e) && this.setState({ visible: !0 });
},
},
{
key: "accept",
value: function () {
var e = this.props,
t = e.cookieName,
n = e.cookieValue,
o = e.hideOnAccept,
r = e.onAccept;
this.setCookie(t, n), r(), o && this.setState({ visible: !1 });
},
},
{
key: "decline",
value: function () {
var e = this.props,
t = e.cookieName,
n = e.declineCookieValue,
o = e.hideOnDecline,
r = e.onDecline;
e.setDeclineCookie && this.setCookie(t, n),
r(),
o && this.setState({ visible: !1 });
},
},
{
key: "setCookie",
value: function (e, t) {
var n = this.props,
o = n.extraCookieOptions,
r = n.expires,
i = n.sameSite,
c = this.props.cookieSecurity;
void 0 === c && (c = !location || "https:" === location.protocol);
var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
i === m.NONE && s().set(S(e), t, a), s().set(e, t, a);
},
},
{
key: "getCookieValue",
value: function () {
var e = this.props.cookieName;
return g(e);
},
},
{
key: "render",
value: function () {
var e = this;
if (!this.state.visible) return null;
var t = this.props,
n = t.location,
o = t.style,
i = t.buttonStyle,
c = t.declineButtonStyle,
a = t.contentStyle,
s = t.disableStyles,
l = t.buttonText,
p = t.declineButtonText,
b = t.containerClasses,
y = t.contentClasses,
d = t.buttonClasses,
v = t.buttonWrapperClasses,
O = t.declineButtonClasses,
m = t.buttonId,
g = t.declineButtonId,
S = t.disableButtonStyles,
C = t.enableDeclineButton,
x = t.flipButtons,
j = t.ButtonComponent,
T = t.overlay,
w = t.overlayClasses,
B = t.overlayStyle,
P = t.ariaAcceptLabel,
D = t.ariaDeclineLabel,
E = {},
I = {},
N = {},
_ = {},
R = {};
switch (
(s
? ((E = u({}, o)),
(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
? ((I = u({}, i)), (N = u({}, c)))
: ((I = u({}, f(f({}, this.state.buttonStyle), i))),
(N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
n)
) {
case h.TOP:
E.top = "0";
break;
case h.BOTTOM:
E.bottom = "0";
}
var A = [];
return (
C &&
A.push(
r().createElement(
j,
{
key: "declineButton",
style: N,
className: O,
id: g,
"aria-label": D,
onClick: function () {
e.decline();
},
},
p
)
),
A.push(
r().createElement(
j,
{
key: "acceptButton",
style: I,
className: d,
id: m,
"aria-label": P,
onClick: function () {
e.accept();
},
},
l
)
),
x && A.reverse(),
r().createElement(
k,
{
condition: T,
wrapper: function (e) {
return r().createElement("div", { style: R, className: w }, e);
},
},
r().createElement(
"div",
{ className: "".concat(b), style: E },
r().createElement("div", { style: _, className: y }, this.props.children),
r().createElement(
"div",
{ className: "".concat(v) },
A.map(function (e) {
return e;
})
)
)
)
);
},
},
]) && y(t.prototype, n),
a
);
})(o.Component);
(x.propTypes = {
location: c().oneOf(
Object.keys(h).map(function (e) {
return h[e];
})
),
sameSite: c().oneOf(
Object.keys(m).map(function (e) {
return m[e];
})
),
style: c().object,
buttonStyle: c().object,
declineButtonStyle: c().object,
contentStyle: c().object,
children: c().any,
disableStyles: c().bool,
hideOnAccept: c().bool,
hideOnDecline: c().bool,
onAccept: c().func,
onDecline: c().func,
buttonText: c().oneOfType([c().string, c().func, c().element]),
declineButtonText: c().oneOfType([c().string, c().func, c().element]),
cookieName: c().string,
cookieValue: c().oneOfType([c().string, c().bool, c().number]),
declineCookieValue: c().oneOfType([c().string, c().bool, c().number]),
setDeclineCookie: c().bool,
debug: c().bool,
expires: c().number,
containerClasses: c().string,
contentClasses: c().string,
buttonClasses: c().string,
buttonWrapperClasses: c().string,
declineButtonClasses: c().string,
buttonId: c().string,
declineButtonId: c().string,
extraCookieOptions: c().object,
disableButtonStyles: c().bool,
enableDeclineButton: c().bool,
flipButtons: c().bool,
ButtonComponent: c().elementType,
cookieSecurity: c().bool,
overlay: c().bool,
overlayClasses: c().string,
overlayStyle: c().object,
ariaAcceptLabel: c().string,
ariaDeclineLabel: c().string,
}),
(x.defaultProps = {
disableStyles: !1,
hideOnAccept: !0,
hideOnDecline: !0,
location: h.BOTTOM,
onAccept: function () {},
onDecline: function () {},
cookieName: C,
cookieValue: !0,
declineCookieValue: !1,
setDeclineCookie: !0,
buttonText: "I understand",
declineButtonText: "I decline",
debug: !1,
expires: 365,
containerClasses: "CookieConsent",
contentClasses: "",
buttonClasses: "",
buttonWrapperClasses: "",
declineButtonClasses: "",
buttonId: "rcc-confirm-button",
declineButtonId: "rcc-decline-button",
extraCookieOptions: {},
disableButtonStyles: !1,
enableDeclineButton: !1,
flipButtons: !1,
sameSite: m.LAX,
ButtonComponent: function (e) {
var t = e.children,
n = (function (e, t) {
if (null == e) return {};
var n,
o,
r = (function (e, t) {
if (null == e) return {};
var n,
o,
r = {},
i = Object.keys(e);
for (o = 0; o < i.length; o++) (n = i[o]), t.indexOf(n) >= 0 || (r[n] = e[n]);
return r;
})(e, t);
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
for (o = 0; o < i.length; o++)
(n = i[o]),
t.indexOf(n) >= 0 ||
(Object.prototype.propertyIsEnumerable.call(e, n) && (r[n] = e[n]));
}
return r;
})(e, ["children"]);
return r().createElement("button", n, t);
},
overlay: !1,
overlayClasses: "",
ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies",
});
const j = x;
},
808: function (e, t, n) {

@@ -527,78 +9,79 @@ var o, r, i;

"function" ==
typeof (o = i = function () {
function e() {
for (var e = 0, t = {}; e < arguments.length; e++) {
var n = arguments[e];
for (var o in n) t[o] = n[o];
}
return t;
}
function t(e) {
return e.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
return (function n(o) {
function r() {}
function i(t, n, i) {
if ("undefined" != typeof document) {
"number" == typeof (i = e({ path: "/" }, r.defaults, i)).expires &&
(i.expires = new Date(1 * new Date() + 864e5 * i.expires)),
(i.expires = i.expires ? i.expires.toUTCString() : "");
try {
var c = JSON.stringify(n);
/^[\{\[]/.test(c) && (n = c);
} catch (e) {}
(n = o.write
? o.write(n, t)
: encodeURIComponent(String(n)).replace(
/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,
decodeURIComponent
)),
(t = encodeURIComponent(String(t))
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape));
var a = "";
for (var s in i)
i[s] && ((a += "; " + s), !0 !== i[s] && (a += "=" + i[s].split(";")[0]));
return (document.cookie = t + "=" + n + a);
typeof (o = i =
function () {
function e() {
for (var e = 0, t = {}; e < arguments.length; e++) {
var n = arguments[e];
for (var o in n) t[o] = n[o];
}
return t;
}
function c(e, n) {
if ("undefined" != typeof document) {
for (
var r = {}, i = document.cookie ? document.cookie.split("; ") : [], c = 0;
c < i.length;
c++
) {
var a = i[c].split("="),
s = a.slice(1).join("=");
n || '"' !== s.charAt(0) || (s = s.slice(1, -1));
function t(e) {
return e.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
return (function n(o) {
function r() {}
function i(t, n, i) {
if ("undefined" != typeof document) {
"number" == typeof (i = e({ path: "/" }, r.defaults, i)).expires &&
(i.expires = new Date(1 * new Date() + 864e5 * i.expires)),
(i.expires = i.expires ? i.expires.toUTCString() : "");
try {
var l = t(a[0]);
if (((s = (o.read || o)(s, l) || t(s)), n))
try {
s = JSON.parse(s);
} catch (e) {}
if (((r[l] = s), e === l)) break;
var c = JSON.stringify(n);
/^[\{\[]/.test(c) && (n = c);
} catch (e) {}
(n = o.write
? o.write(n, t)
: encodeURIComponent(String(n)).replace(
/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,
decodeURIComponent
)),
(t = encodeURIComponent(String(t))
.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
.replace(/[\(\)]/g, escape));
var l = "";
for (var a in i)
i[a] && ((l += "; " + a), !0 !== i[a] && (l += "=" + i[a].split(";")[0]));
return (document.cookie = t + "=" + n + l);
}
return e ? r[e] : r;
}
}
return (
(r.set = i),
(r.get = function (e) {
return c(e, !1);
}),
(r.getJSON = function (e) {
return c(e, !0);
}),
(r.remove = function (t, n) {
i(t, "", e(n, { expires: -1 }));
}),
(r.defaults = {}),
(r.withConverter = n),
r
);
})(function () {});
})
function c(e, n) {
if ("undefined" != typeof document) {
for (
var r = {}, i = document.cookie ? document.cookie.split("; ") : [], c = 0;
c < i.length;
c++
) {
var l = i[c].split("="),
a = l.slice(1).join("=");
n || '"' !== a.charAt(0) || (a = a.slice(1, -1));
try {
var s = t(l[0]);
if (((a = (o.read || o)(a, s) || t(a)), n))
try {
a = JSON.parse(a);
} catch (e) {}
if (((r[s] = a), e === s)) break;
} catch (e) {}
}
return e ? r[e] : r;
}
}
return (
(r.set = i),
(r.get = function (e) {
return c(e, !1);
}),
(r.getJSON = function (e) {
return c(e, !0);
}),
(r.remove = function (t, n) {
i(t, "", e(n, { expires: -1 }));
}),
(r.defaults = {}),
(r.withConverter = n),
r
);
})(function () {});
})
? o.call(t, n, t, e)

@@ -617,6 +100,6 @@ : o) || (e.exports = r),

if (c !== o) {
var a = new Error(
var l = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
);
throw ((a.name = "Invariant Violation"), a);
throw ((l.name = "Invariant Violation"), l);
}

@@ -663,18 +146,18 @@ }

function n(o) {
if (t[o]) return t[o].exports;
var r = (t[o] = { exports: {} });
return e[o](r, r.exports, n), r.exports;
var r = t[o];
if (void 0 !== r) return r.exports;
var i = (t[o] = { exports: {} });
return e[o](i, i.exports, n), i.exports;
}
return (
(n.n = function (e) {
var t =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return n.d(t, { a: t }), t;
}),
(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 = function (e, t) {

@@ -692,5 +175,551 @@ for (var o in t)

Object.defineProperty(e, "__esModule", { value: !0 });
});
var o = {};
!(function () {
"use strict";
n.r(o),
n.d(o, {
Cookies: function () {
return l();
},
OPTIONS: function () {
return O;
},
SAME_SITE_OPTIONS: function () {
return g;
},
default: function () {
return w;
},
getCookieConsentValue: function () {
return S;
},
});
const e = require("react");
var t = n.n(e),
r = n(697),
i = n.n(r),
c = n(808),
l = n.n(c);
function a(e) {
return (a =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (e) {
return typeof e;
}
: function (e) {
return e &&
"function" == typeof Symbol &&
e.constructor === Symbol &&
e !== Symbol.prototype
? "symbol"
: typeof e;
})(e);
}
var s = ["children"];
function u() {
return (u =
Object.assign ||
function (e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t];
for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
}
return e;
}).apply(this, arguments);
}
function p(e, t) {
var n = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
t &&
(o = o.filter(function (t) {
return Object.getOwnPropertyDescriptor(e, t).enumerable;
})),
n.push.apply(n, o);
}
return n;
}
function f(e) {
for (var t = 1; t < arguments.length; t++) {
var n = null != arguments[t] ? arguments[t] : {};
t % 2
? p(Object(n), !0).forEach(function (t) {
h(e, t, n[t]);
})
: Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
: p(Object(n)).forEach(function (t) {
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
});
}
return e;
}
function d(e, t) {
for (var n = 0; n < t.length; n++) {
var o = t[n];
(o.enumerable = o.enumerable || !1),
(o.configurable = !0),
"value" in o && (o.writable = !0),
Object.defineProperty(e, o.key, o);
}
}
function b(e, t) {
return (b =
Object.setPrototypeOf ||
function (e, t) {
return (e.__proto__ = t), e;
})(e, t);
}
function y(e, t) {
if (t && ("object" === a(t) || "function" == typeof t)) return t;
if (void 0 !== t)
throw new TypeError("Derived constructors may only return object or undefined");
return v(e);
}
function v(e) {
if (void 0 === e)
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function m(e) {
return (m = Object.setPrototypeOf
? Object.getPrototypeOf
: function (e) {
return e.__proto__ || Object.getPrototypeOf(e);
})(e);
}
function h(e, t, n) {
return (
t in e
? Object.defineProperty(e, t, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0,
})
: (e[t] = n),
e
);
}
var O = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
g = { STRICT: "strict", LAX: "lax", NONE: "none" },
S = function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : k,
t = l().get(e);
return void 0 === t && (t = l().get(C(e))), t;
},
C = function (e) {
return "".concat(e, "-legacy");
},
k = "CookieConsent",
x = function (e) {
var t = e.condition,
n = e.wrapper,
o = e.children;
return t ? n(o) : o;
},
j = (function (e) {
!(function (e, t) {
if ("function" != typeof t && null !== t)
throw new TypeError("Super expression must either be null or a function");
(e.prototype = Object.create(t && t.prototype, {
constructor: { value: e, writable: !0, configurable: !0 },
})),
t && b(e, t);
})(a, e);
var n,
o,
r,
i,
c =
((r = a),
(i = (function () {
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
if (Reflect.construct.sham) return !1;
if ("function" == typeof Proxy) return !0;
try {
return (
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})), !0
);
} catch (e) {
return !1;
}
})()),
function () {
var e,
t = m(r);
if (i) {
var n = m(this).constructor;
e = Reflect.construct(t, arguments, n);
} else e = t.apply(this, arguments);
return y(this, e);
});
function a(e) {
var t;
return (
(function (e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
})(this, a),
h(v((t = c.call(this, e))), "handleScroll", function () {
var e = t.props.acceptOnScrollPercentage,
n = document.documentElement,
o = document.body,
r = "scrollTop",
i = "scrollHeight";
((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0);
}),
h(v(t), "removeScrollListener", function () {
t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll);
}),
(t.state = {
visible: !1,
style: {
alignItems: "baseline",
background: "#353535",
color: "white",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
left: "0",
position: "fixed",
width: "100%",
zIndex: "999",
},
buttonStyle: {
background: "#ffd42d",
border: "0",
borderRadius: "0px",
boxShadow: "none",
color: "black",
cursor: "pointer",
flex: "0 0 auto",
padding: "5px 10px",
margin: "15px",
},
declineButtonStyle: {
background: "#c12a2a",
border: "0",
borderRadius: "0px",
boxShadow: "none",
color: "#e5e5e5",
cursor: "pointer",
flex: "0 0 auto",
padding: "5px 10px",
margin: "15px",
},
contentStyle: { flex: "1 0 300px", margin: "15px" },
overlayStyle: {
position: "fixed",
left: 0,
top: 0,
width: "100%",
height: "100%",
zIndex: "999",
backgroundColor: "rgba(0,0,0,0.3)",
},
}),
t
);
}
return (
(n = a),
(o = [
{
key: "componentDidMount",
value: function () {
var e = this.props.debug;
(void 0 === this.getCookieValue() || e) &&
(this.setState({ visible: !0 }),
this.props.acceptOnScroll &&
window.addEventListener("scroll", this.handleScroll, { passive: !0 }));
},
},
{
key: "componentWillUnmount",
value: function () {
this.removeScrollListener();
},
},
{
key: "accept",
value: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0],
t = this.props,
n = t.cookieName,
o = t.cookieValue,
r = t.hideOnAccept,
i = t.onAccept;
this.setCookie(n, o),
i(null != e && e),
r && (this.setState({ visible: !1 }), this.removeScrollListener());
},
},
{
key: "decline",
value: function () {
var e = this.props,
t = e.cookieName,
n = e.declineCookieValue,
o = e.hideOnDecline,
r = e.onDecline;
e.setDeclineCookie && this.setCookie(t, n),
r(),
o && this.setState({ visible: !1 });
},
},
{
key: "setCookie",
value: function (e, t) {
var n = this.props,
o = n.extraCookieOptions,
r = n.expires,
i = n.sameSite,
c = this.props.cookieSecurity;
void 0 === c && (c = !location || "https:" === location.protocol);
var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
i === g.NONE && l().set(C(e), t, a), l().set(e, t, a);
},
},
{
key: "getCookieValue",
value: function () {
var e = this.props.cookieName;
return S(e);
},
},
{
key: "render",
value: function () {
var e = this;
if (!this.state.visible) return null;
var n = this.props,
o = n.location,
r = n.style,
i = n.buttonStyle,
c = n.declineButtonStyle,
l = n.contentStyle,
a = n.disableStyles,
s = n.buttonText,
p = n.declineButtonText,
d = n.containerClasses,
b = n.contentClasses,
y = n.buttonClasses,
v = n.buttonWrapperClasses,
m = n.declineButtonClasses,
h = n.buttonId,
g = n.declineButtonId,
S = n.disableButtonStyles,
C = n.enableDeclineButton,
k = n.flipButtons,
j = n.ButtonComponent,
w = n.overlay,
T = n.overlayClasses,
B = n.overlayStyle,
P = n.ariaAcceptLabel,
E = n.ariaDeclineLabel,
D = {},
I = {},
N = {},
_ = {},
R = {};
switch (
(a
? ((D = u({}, r)),
(I = u({}, i)),
(N = u({}, c)),
(_ = u({}, l)),
(R = u({}, B)))
: ((D = u({}, f(f({}, this.state.style), r))),
(_ = u({}, f(f({}, this.state.contentStyle), l))),
(R = u({}, f(f({}, this.state.overlayStyle), B))),
S
? ((I = u({}, i)), (N = u({}, c)))
: ((I = u({}, f(f({}, this.state.buttonStyle), i))),
(N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
o)
) {
case O.TOP:
D.top = "0";
break;
case O.BOTTOM:
D.bottom = "0";
}
var A = [];
return (
C &&
A.push(
t().createElement(
j,
{
key: "declineButton",
style: N,
className: m,
id: g,
"aria-label": E,
onClick: function () {
e.decline();
},
},
p
)
),
A.push(
t().createElement(
j,
{
key: "acceptButton",
style: I,
className: y,
id: h,
"aria-label": P,
onClick: function () {
e.accept();
},
},
s
)
),
k && A.reverse(),
t().createElement(
x,
{
condition: w,
wrapper: function (e) {
return t().createElement("div", { style: R, className: T }, e);
},
},
t().createElement(
"div",
{ className: "".concat(d), style: D },
t().createElement("div", { style: _, className: b }, this.props.children),
t().createElement(
"div",
{ className: "".concat(v) },
A.map(function (e) {
return e;
})
)
)
)
);
},
},
]) && d(n.prototype, o),
a
);
})(e.Component);
(j.propTypes = {
location: i().oneOf(
Object.keys(O).map(function (e) {
return O[e];
})
),
sameSite: i().oneOf(
Object.keys(g).map(function (e) {
return g[e];
})
),
style: i().object,
buttonStyle: i().object,
declineButtonStyle: i().object,
contentStyle: i().object,
children: i().any,
disableStyles: i().bool,
hideOnAccept: i().bool,
hideOnDecline: i().bool,
onAccept: i().func,
onDecline: i().func,
buttonText: i().oneOfType([i().string, i().func, i().element]),
declineButtonText: i().oneOfType([i().string, i().func, i().element]),
cookieName: i().string,
cookieValue: i().oneOfType([i().string, i().bool, i().number]),
declineCookieValue: i().oneOfType([i().string, i().bool, i().number]),
setDeclineCookie: i().bool,
debug: i().bool,
expires: i().number,
containerClasses: i().string,
contentClasses: i().string,
buttonClasses: i().string,
buttonWrapperClasses: i().string,
declineButtonClasses: i().string,
buttonId: i().string,
declineButtonId: i().string,
extraCookieOptions: i().object,
disableButtonStyles: i().bool,
enableDeclineButton: i().bool,
flipButtons: i().bool,
ButtonComponent: i().elementType,
cookieSecurity: i().bool,
overlay: i().bool,
overlayClasses: i().string,
overlayStyle: i().object,
ariaAcceptLabel: i().string,
ariaDeclineLabel: i().string,
acceptOnScroll: i().bool,
acceptOnScrollPercentage: i().number,
}),
n(866)
);
(j.defaultProps = {
disableStyles: !1,
hideOnAccept: !0,
hideOnDecline: !0,
location: O.BOTTOM,
onAccept: function () {},
onDecline: function () {},
cookieName: k,
cookieValue: !0,
declineCookieValue: !1,
setDeclineCookie: !0,
buttonText: "I understand",
declineButtonText: "I decline",
debug: !1,
expires: 365,
containerClasses: "CookieConsent",
contentClasses: "",
buttonClasses: "",
buttonWrapperClasses: "",
declineButtonClasses: "",
buttonId: "rcc-confirm-button",
declineButtonId: "rcc-decline-button",
extraCookieOptions: {},
disableButtonStyles: !1,
enableDeclineButton: !1,
flipButtons: !1,
sameSite: g.LAX,
ButtonComponent: function (e) {
var n = e.children,
o = (function (e, t) {
if (null == e) return {};
var n,
o,
r = (function (e, t) {
if (null == e) return {};
var n,
o,
r = {},
i = Object.keys(e);
for (o = 0; o < i.length; o++) (n = i[o]), t.indexOf(n) >= 0 || (r[n] = e[n]);
return r;
})(e, t);
if (Object.getOwnPropertySymbols) {
var i = Object.getOwnPropertySymbols(e);
for (o = 0; o < i.length; o++)
(n = i[o]),
t.indexOf(n) >= 0 ||
(Object.prototype.propertyIsEnumerable.call(e, n) && (r[n] = e[n]));
}
return r;
})(e, s);
return t().createElement("button", o, n);
},
overlay: !1,
overlayClasses: "",
ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies",
acceptOnScroll: !1,
acceptOnScrollPercentage: 25,
});
const w = j;
})(),
(module.exports = o);
})();

8

CHANGELOG.md

@@ -8,2 +8,10 @@ # Changelog

## [[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.4]
- version bumps :)
## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)]

@@ -10,0 +18,0 @@

2

package.json

@@ -7,3 +7,3 @@ {

},
"version": "6.2.4",
"version": "6.3.0",
"description": "A small, simple and customizable cookie consent bar for use in React applications.",

@@ -10,0 +10,0 @@ "main": "build/index.js",

108

README.md

@@ -87,8 +87,13 @@ # :cookie: react-cookie-consent :cookie:

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");
}
}}

@@ -121,41 +126,43 @@ ></CookieConsent>

| 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 |

@@ -234,2 +241,19 @@ ## Debugging it

#### 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

@@ -236,0 +260,0 @@

4

src/index.d.ts

@@ -15,3 +15,3 @@ import * as React from "react";

hideOnAccept?: boolean;
onAccept?: Function;
onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function;

@@ -43,2 +43,4 @@ buttonText?: Function | React.ReactNode;

ariaDeclineLabel?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
}

@@ -45,0 +47,0 @@

56

src/index.js

@@ -119,9 +119,18 @@ import React, { Component } from "react";

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;

@@ -131,6 +140,7 @@

onAccept();
onAccept(acceptedByScrolling ?? false);
if (hideOnAccept) {
this.setState({ visible: false });
this.removeScrollListener();
}

@@ -143,9 +153,4 @@ }

decline() {
const {
cookieName,
declineCookieValue,
hideOnDecline,
onDecline,
setDeclineCookie,
} = this.props;
const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
this.props;

@@ -197,2 +202,31 @@ if (setDeclineCookie) {

/**
* 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() {

@@ -376,2 +410,4 @@ // If the bar shouldn't be visible don't render anything.

ariaDeclineLabel: PropTypes.string,
acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number,
};

@@ -411,2 +447,4 @@

ariaDeclineLabel: "Decline cookies",
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
};

@@ -413,0 +451,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc