mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-01-20 18:41:44 +01:00
Code Issues Projects Releases Wiki Activity

Added the exported function getCookieConsentValue to get the cookie value from custom code

Browse Source
This commit is contained in:
Rick van Lieshout 2020-12-06 19:07:50 +01:00
parent 7d8f52018d
commit 26306f7490
4 changed files with 111 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.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)] ## [[6.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.1.0)]
Added support for React 17 Added support for React 17

10
README.md
View File

@ -105,6 +105,16 @@ If the decline button is enabled then the (onDecline) prop function can be used,
></CookieConsent> ></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 ## Props
| Prop | Type | Default value | Description | | Prop | Type | Default value | Description |

127
build/index.js
View File

@ -6,9 +6,10 @@ module.exports = (() => {
n.r(t), n.r(t),
n.d(t, { n.d(t, {
Cookies: () => s(), Cookies: () => s(),
OPTIONS: () => O, OPTIONS: () => h,
SAME_SITE_OPTIONS: () => v, SAME_SITE_OPTIONS: () => m,
default: () => S, default: () => j,
getCookieConsentValue: () => g,
}); });
const o = require("react"); const o = require("react");
var r = n.n(o), var r = n.n(o),
@ -59,7 +60,7 @@ module.exports = (() => {
var n = null != arguments[t] ? arguments[t] : {}; var n = null != arguments[t] ? arguments[t] : {};
t % 2 t % 2
? p(Object(n), !0).forEach(function (t) { ? p(Object(n), !0).forEach(function (t) {
y(e, t, n[t]); b(e, t, n[t]);
}) })
: Object.getOwnPropertyDescriptors : Object.getOwnPropertyDescriptors
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
@ -69,7 +70,7 @@ module.exports = (() => {
} }
return e; return e;
} }
function y(e, t, n) { function b(e, t, n) {
return ( return (
t in e t in e
? Object.defineProperty(e, t, { ? Object.defineProperty(e, t, {
@ -82,7 +83,7 @@ module.exports = (() => {
e e
); );
} }
function b(e, t) { function y(e, t) {
for (var n = 0; n < t.length; n++) { for (var n = 0; n < t.length; n++) {
var o = t[n]; var o = t[n];
(o.enumerable = o.enumerable || !1), (o.enumerable = o.enumerable || !1),
@ -98,7 +99,7 @@ module.exports = (() => {
return (e.__proto__ = t), e; return (e.__proto__ = t), e;
})(e, t); })(e, t);
} }
function m(e, t) { function v(e, t) {
return !t || ("object" !== l(t) && "function" != typeof t) return !t || ("object" !== l(t) && "function" != typeof t)
? (function (e) { ? (function (e) {
if (void 0 === e) if (void 0 === e)
@ -109,22 +110,31 @@ module.exports = (() => {
})(e) })(e)
: t; : t;
} }
function h(e) { function O(e) {
return (h = Object.setPrototypeOf return (O = Object.setPrototypeOf
? Object.getPrototypeOf ? Object.getPrototypeOf
: function (e) { : function (e) {
return e.__proto__ || Object.getPrototypeOf(e); return e.__proto__ || Object.getPrototypeOf(e);
})(e); })(e);
} }
var O = { TOP: "top", BOTTOM: "bottom", NONE: "none" }, var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
v = { STRICT: "strict", LAX: "lax", NONE: "none" }, m = { STRICT: "strict", LAX: "lax", NONE: "none" },
g = function (e) { 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, var t = e.condition,
n = e.wrapper, n = e.wrapper,
o = e.children; o = e.children;
return t ? n(o) : o; return t ? n(o) : o;
}, },
C = (function (e) { x = (function (e) {
!(function (e, t) { !(function (e, t) {
if ("function" != typeof t && null !== t) if ("function" != typeof t && null !== t)
throw new TypeError("Super expression must either be null or a function"); throw new TypeError("Super expression must either be null or a function");
@ -153,12 +163,12 @@ module.exports = (() => {
})()), })()),
function () { function () {
var e, var e,
t = h(o); t = O(o);
if (i) { if (i) {
var n = h(this).constructor; var n = O(this).constructor;
e = Reflect.construct(t, arguments, n); e = Reflect.construct(t, arguments, n);
} else e = t.apply(this, arguments); } else e = t.apply(this, arguments);
return m(this, e); return v(this, e);
}); });
function a(e) { function a(e) {
var t; var t;
@ -250,12 +260,6 @@ module.exports = (() => {
o && this.setState({ visible: !1 }); o && this.setState({ visible: !1 });
}, },
}, },
{
key: "getLegacyCookieName",
value: function (e) {
return "".concat(e, "-legacy");
},
},
{ {
key: "setCookie", key: "setCookie",
value: function (e, t) { value: function (e, t) {
@ -266,15 +270,14 @@ module.exports = (() => {
c = this.props.cookieSecurity; c = this.props.cookieSecurity;
void 0 === c && (c = !location || "https:" === location.protocol); void 0 === c && (c = !location || "https:" === location.protocol);
var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c }); 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", key: "getCookieValue",
value: function () { value: function () {
var e = this.props.cookieName, var e = this.props.cookieName;
t = s().get(e); return g(e);
return void 0 === t && (t = s().get(this.getLegacyCookieName(e))), t;
}, },
}, },
{ {
@ -291,15 +294,15 @@ module.exports = (() => {
s = t.disableStyles, s = t.disableStyles,
l = t.buttonText, l = t.buttonText,
p = t.declineButtonText, p = t.declineButtonText,
y = t.containerClasses, b = t.containerClasses,
b = t.contentClasses, y = t.contentClasses,
d = t.buttonClasses, d = t.buttonClasses,
m = t.buttonWrapperClasses, v = t.buttonWrapperClasses,
h = t.declineButtonClasses, O = t.declineButtonClasses,
v = t.buttonId, m = t.buttonId,
C = t.declineButtonId, g = t.declineButtonId,
S = t.disableButtonStyles, S = t.disableButtonStyles,
k = t.enableDeclineButton, C = t.enableDeclineButton,
x = t.flipButtons, x = t.flipButtons,
j = t.ButtonComponent, j = t.ButtonComponent,
T = t.overlay, T = t.overlay,
@ -308,43 +311,43 @@ module.exports = (() => {
P = t.ariaAcceptLabel, P = t.ariaAcceptLabel,
D = t.ariaDeclineLabel, D = t.ariaDeclineLabel,
E = {}, E = {},
N = {},
I = {}, I = {},
N = {},
_ = {}, _ = {},
R = {}; R = {};
switch ( switch (
(s (s
? ((E = u({}, o)), ? ((E = u({}, o)),
(N = u({}, i)), (I = u({}, i)),
(I = u({}, c)), (N = u({}, c)),
(_ = u({}, a)), (_ = u({}, a)),
(R = u({}, B))) (R = u({}, B)))
: ((E = u({}, f(f({}, this.state.style), o))), : ((E = u({}, f(f({}, this.state.style), o))),
(_ = u({}, f(f({}, this.state.contentStyle), a))), (_ = u({}, f(f({}, this.state.contentStyle), a))),
(R = u({}, f(f({}, this.state.overlayStyle), B))), (R = u({}, f(f({}, this.state.overlayStyle), B))),
S S
? ((N = u({}, i)), (I = u({}, c))) ? ((I = u({}, i)), (N = u({}, c)))
: ((N = u({}, f(f({}, this.state.buttonStyle), i))), : ((I = u({}, f(f({}, this.state.buttonStyle), i))),
(I = u({}, f(f({}, this.state.declineButtonStyle), c))))), (N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
n) n)
) { ) {
case O.TOP: case h.TOP:
E.top = "0"; E.top = "0";
break; break;
case O.BOTTOM: case h.BOTTOM:
E.bottom = "0"; E.bottom = "0";
} }
var A = []; var A = [];
return ( return (
k && C &&
A.push( A.push(
r().createElement( r().createElement(
j, j,
{ {
key: "declineButton", key: "declineButton",
style: I, style: N,
className: h, className: O,
id: C, id: g,
"aria-label": D, "aria-label": D,
onClick: function () { onClick: function () {
e.decline(); e.decline();
@ -358,9 +361,9 @@ module.exports = (() => {
j, j,
{ {
key: "acceptButton", key: "acceptButton",
style: N, style: I,
className: d, className: d,
id: v, id: m,
"aria-label": P, "aria-label": P,
onClick: function () { onClick: function () {
e.accept(); e.accept();
@ -371,7 +374,7 @@ module.exports = (() => {
), ),
x && A.reverse(), x && A.reverse(),
r().createElement( r().createElement(
g, k,
{ {
condition: T, condition: T,
wrapper: function (e) { wrapper: function (e) {
@ -380,11 +383,11 @@ module.exports = (() => {
}, },
r().createElement( r().createElement(
"div", "div",
{ className: "".concat(y), style: E }, { className: "".concat(b), style: E },
r().createElement("div", { style: _, className: b }, this.props.children), r().createElement("div", { style: _, className: y }, this.props.children),
r().createElement( r().createElement(
"div", "div",
{ className: "".concat(m) }, { className: "".concat(v) },
A.map(function (e) { A.map(function (e) {
return e; return e;
}) })
@ -394,19 +397,19 @@ module.exports = (() => {
); );
}, },
}, },
]) && b(t.prototype, n), ]) && y(t.prototype, n),
a a
); );
})(o.Component); })(o.Component);
(C.propTypes = { (x.propTypes = {
location: c().oneOf( location: c().oneOf(
Object.keys(O).map(function (e) { Object.keys(h).map(function (e) {
return O[e]; return h[e];
}) })
), ),
sameSite: c().oneOf( sameSite: c().oneOf(
Object.keys(v).map(function (e) { Object.keys(m).map(function (e) {
return v[e]; return m[e];
}) })
), ),
style: c().object, style: c().object,
@ -446,14 +449,14 @@ module.exports = (() => {
ariaAcceptLabel: c().string, ariaAcceptLabel: c().string,
ariaDeclineLabel: c().string, ariaDeclineLabel: c().string,
}), }),
(C.defaultProps = { (x.defaultProps = {
disableStyles: !1, disableStyles: !1,
hideOnAccept: !0, hideOnAccept: !0,
hideOnDecline: !0, hideOnDecline: !0,
location: O.BOTTOM, location: h.BOTTOM,
onAccept: function () {}, onAccept: function () {},
onDecline: function () {}, onDecline: function () {},
cookieName: "CookieConsent", cookieName: C,
cookieValue: !0, cookieValue: !0,
declineCookieValue: !1, declineCookieValue: !1,
setDeclineCookie: !0, setDeclineCookie: !0,
@ -472,7 +475,7 @@ module.exports = (() => {
disableButtonStyles: !1, disableButtonStyles: !1,
enableDeclineButton: !1, enableDeclineButton: !1,
flipButtons: !1, flipButtons: !1,
sameSite: v.LAX, sameSite: m.LAX,
ButtonComponent: function (e) { ButtonComponent: function (e) {
var t = e.children, var t = e.children,
n = (function (e, t) { n = (function (e, t) {
@ -504,7 +507,7 @@ module.exports = (() => {
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
}); });
const S = C; const j = x;
}, },
808: (e, t, n) => { 808: (e, t, n) => {
var o, r, i; var o, r, i;

50
src/index.js
View File

@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
NONE: "none", 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 * A function to wrap elements with a "wrapper" on a condition
* @param {object} wrappingOptions * @param {object} wrappingOptions
@ -128,14 +157,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 * Function to set the consent cookie based on the provided variables
* Sets two cookies to handle incompatible browsers, more details: * Sets two cookies to handle incompatible browsers, more details:
@ -153,7 +174,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 // 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) { if (sameSite === SAME_SITE_OPTIONS.NONE) {
Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions); Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
} }
// set the regular cookie // set the regular cookie
@ -167,14 +188,7 @@ class CookieConsent extends Component {
*/ */
getCookieValue() { getCookieValue() {
const { cookieName } = this.props; const { cookieName } = this.props;
return getCookieConsentValue(cookieName);
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;
} }
render() { render() {
@ -364,7 +378,7 @@ CookieConsent.defaultProps = {
location: OPTIONS.BOTTOM, location: OPTIONS.BOTTOM,
onAccept: () => {}, onAccept: () => {},
onDecline: () => {}, onDecline: () => {},
cookieName: "CookieConsent", cookieName: defaultCookieConsentName,
cookieValue: true, cookieValue: true,
declineCookieValue: false, declineCookieValue: false,
setDeclineCookie: true, setDeclineCookie: true,