mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 01:24:54 +02:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
413abc7fd8 | ||
| 2a1e52b24a | |||
| 775ec9db96 |
@@ -5,6 +5,15 @@ 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).
|
||||
|
||||
## [[7.2.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.0)
|
||||
|
||||
- Added `onOverlayClick` which allows you to react to a click on the overlay
|
||||
- Added `acceptOnOverlayClick` which accepts the cookies when the overlay is clicked and runs `onOverlayClick`
|
||||
|
||||
## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.1)
|
||||
|
||||
- `customContentAttributes` and `customContainerAttributes` are now optional in the typing file as they should be
|
||||
|
||||
## [[7.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
|
||||
|
||||
- Added custom attribute props for content and container
|
||||
|
||||
92
README.md
92
README.md
@@ -137,52 +137,52 @@ That option would be interesting if you want to allow user to change their conse
|
||||
|
||||
## 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. |
|
||||
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
|
||||
| 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 |
|
||||
|
||||
| customContentAttributes
|
||||
| object | {} | Allows you to set custom (data) attributes on the content div |
|
||||
| customContainerAttributes | object | {} | Allows you to set custom (data) attributes on the container div |
|
||||
| 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. |
|
||||
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
|
||||
| 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 |
|
||||
| customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div |
|
||||
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
|
||||
| onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
|
||||
| acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay |
|
||||
|
||||
## Debugging it
|
||||
|
||||
|
||||
4
build/index.d.ts
vendored
4
build/index.d.ts
vendored
@@ -38,10 +38,14 @@ export interface CookieConsentProps {
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
onOverlayClick?: () => void;
|
||||
acceptOnOverlayClick?: boolean;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
customContentAttributes?: object;
|
||||
customContainerAttributes?: object;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
175
build/index.js
175
build/index.js
@@ -189,19 +189,19 @@
|
||||
return l();
|
||||
},
|
||||
OPTIONS: function () {
|
||||
return m;
|
||||
return h;
|
||||
},
|
||||
SAME_SITE_OPTIONS: function () {
|
||||
return g;
|
||||
return C;
|
||||
},
|
||||
VISIBLE_OPTIONS: function () {
|
||||
return S;
|
||||
return g;
|
||||
},
|
||||
default: function () {
|
||||
return B;
|
||||
},
|
||||
getCookieConsentValue: function () {
|
||||
return C;
|
||||
return S;
|
||||
},
|
||||
resetCookieConsentValue: function () {
|
||||
return k;
|
||||
@@ -257,7 +257,7 @@
|
||||
var n = null != arguments[t] ? arguments[t] : {};
|
||||
t % 2
|
||||
? p(Object(n), !0).forEach(function (t) {
|
||||
h(e, t, n[t]);
|
||||
m(e, t, n[t]);
|
||||
})
|
||||
: Object.getOwnPropertyDescriptors
|
||||
? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
|
||||
@@ -267,7 +267,7 @@
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function d(e, t) {
|
||||
function b(e, t) {
|
||||
for (var n = 0; n < t.length; n++) {
|
||||
var o = t[n];
|
||||
(o.enumerable = o.enumerable || !1),
|
||||
@@ -276,14 +276,14 @@
|
||||
Object.defineProperty(e, o.key, o);
|
||||
}
|
||||
}
|
||||
function b(e, t) {
|
||||
return (b =
|
||||
function y(e, t) {
|
||||
return (y =
|
||||
Object.setPrototypeOf ||
|
||||
function (e, t) {
|
||||
return (e.__proto__ = t), e;
|
||||
})(e, t);
|
||||
}
|
||||
function y(e, t) {
|
||||
function d(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");
|
||||
@@ -301,7 +301,7 @@
|
||||
return e.__proto__ || Object.getPrototypeOf(e);
|
||||
})(e);
|
||||
}
|
||||
function h(e, t, n) {
|
||||
function m(e, t, n) {
|
||||
return (
|
||||
t in e
|
||||
? Object.defineProperty(e, t, {
|
||||
@@ -314,10 +314,10 @@
|
||||
e
|
||||
);
|
||||
}
|
||||
var m = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
|
||||
g = { STRICT: "strict", LAX: "lax", NONE: "none" },
|
||||
S = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
|
||||
C = function () {
|
||||
var h = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
|
||||
C = { STRICT: "strict", LAX: "lax", NONE: "none" },
|
||||
g = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
|
||||
S = function () {
|
||||
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
|
||||
t = l().get(e);
|
||||
return void 0 === t && (t = l().get(x(e))), t;
|
||||
@@ -343,7 +343,7 @@
|
||||
(e.prototype = Object.create(t && t.prototype, {
|
||||
constructor: { value: e, writable: !0, configurable: !0 },
|
||||
})),
|
||||
t && b(e, t);
|
||||
t && y(e, t);
|
||||
})(a, e);
|
||||
var n,
|
||||
o,
|
||||
@@ -373,7 +373,7 @@
|
||||
var n = O(this).constructor;
|
||||
e = Reflect.construct(t, arguments, n);
|
||||
} else e = t.apply(this, arguments);
|
||||
return y(this, e);
|
||||
return d(this, e);
|
||||
});
|
||||
function a(e) {
|
||||
var t;
|
||||
@@ -381,7 +381,7 @@
|
||||
(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 () {
|
||||
m(v((t = c.call(this, e))), "handleScroll", function () {
|
||||
var e = t.props.acceptOnScrollPercentage,
|
||||
n = document.documentElement,
|
||||
o = document.body,
|
||||
@@ -389,7 +389,7 @@
|
||||
i = "scrollHeight";
|
||||
((n[r] || o[r]) / ((n[i] || o[i]) - n.clientHeight)) * 100 > e && t.accept(!0);
|
||||
}),
|
||||
h(v(t), "removeScrollListener", function () {
|
||||
m(v(t), "removeScrollListener", function () {
|
||||
t.props.acceptOnScroll && window.removeEventListener("scroll", t.handleScroll);
|
||||
}),
|
||||
(t.state = {
|
||||
@@ -475,6 +475,15 @@
|
||||
r && (this.setState({ visible: !1 }), this.removeScrollListener());
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "overlayClick",
|
||||
value: function () {
|
||||
var e = this.props,
|
||||
t = e.acceptOnOverlayClick,
|
||||
n = e.onOverlayClick;
|
||||
t && this.accept(), n();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "decline",
|
||||
value: function () {
|
||||
@@ -498,14 +507,14 @@
|
||||
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(x(e), t, a), l().set(e, t, a);
|
||||
i === C.NONE && l().set(x(e), t, a), l().set(e, t, a);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "getCookieValue",
|
||||
value: function () {
|
||||
var e = this.props.cookieName;
|
||||
return C(e);
|
||||
return S(e);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -513,9 +522,9 @@
|
||||
value: function () {
|
||||
var e = this;
|
||||
switch (this.props.visible) {
|
||||
case S.HIDDEN:
|
||||
case g.HIDDEN:
|
||||
return null;
|
||||
case S.BY_COOKIE_VALUE:
|
||||
case g.BY_COOKIE_VALUE:
|
||||
if (!this.state.visible) return null;
|
||||
}
|
||||
var n = this.props,
|
||||
@@ -527,14 +536,14 @@
|
||||
a = n.disableStyles,
|
||||
s = n.buttonText,
|
||||
p = n.declineButtonText,
|
||||
d = n.containerClasses,
|
||||
b = n.contentClasses,
|
||||
y = n.buttonClasses,
|
||||
b = n.containerClasses,
|
||||
y = n.contentClasses,
|
||||
d = n.buttonClasses,
|
||||
v = n.buttonWrapperClasses,
|
||||
O = n.declineButtonClasses,
|
||||
h = n.buttonId,
|
||||
g = n.declineButtonId,
|
||||
C = n.disableButtonStyles,
|
||||
m = n.buttonId,
|
||||
C = n.declineButtonId,
|
||||
S = n.disableButtonStyles,
|
||||
k = n.enableDeclineButton,
|
||||
x = n.flipButtons,
|
||||
j = n.ButtonComponent,
|
||||
@@ -543,44 +552,46 @@
|
||||
E = n.overlayStyle,
|
||||
P = n.ariaAcceptLabel,
|
||||
D = n.ariaDeclineLabel,
|
||||
I = {},
|
||||
_ = {},
|
||||
I = n.customContainerAttributes,
|
||||
_ = n.customContentAttributes,
|
||||
A = {},
|
||||
N = {},
|
||||
R = {},
|
||||
A = {};
|
||||
L = {},
|
||||
V = {};
|
||||
switch (
|
||||
(a
|
||||
? ((I = u({}, r)),
|
||||
(_ = u({}, i)),
|
||||
(N = u({}, c)),
|
||||
(R = u({}, l)),
|
||||
(A = u({}, E)))
|
||||
: ((I = u({}, f(f({}, this.state.style), r))),
|
||||
(R = u({}, f(f({}, this.state.contentStyle), l))),
|
||||
(A = u({}, f(f({}, this.state.overlayStyle), E))),
|
||||
C
|
||||
? ((_ = u({}, i)), (N = u({}, c)))
|
||||
: ((_ = u({}, f(f({}, this.state.buttonStyle), i))),
|
||||
(N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
|
||||
? ((A = u({}, r)),
|
||||
(N = u({}, i)),
|
||||
(R = u({}, c)),
|
||||
(L = u({}, l)),
|
||||
(V = u({}, E)))
|
||||
: ((A = u({}, f(f({}, this.state.style), r))),
|
||||
(L = u({}, f(f({}, this.state.contentStyle), l))),
|
||||
(V = u({}, f(f({}, this.state.overlayStyle), E))),
|
||||
S
|
||||
? ((N = u({}, i)), (R = u({}, c)))
|
||||
: ((N = u({}, f(f({}, this.state.buttonStyle), i))),
|
||||
(R = u({}, f(f({}, this.state.declineButtonStyle), c))))),
|
||||
o)
|
||||
) {
|
||||
case m.TOP:
|
||||
I.top = "0";
|
||||
case h.TOP:
|
||||
A.top = "0";
|
||||
break;
|
||||
case m.BOTTOM:
|
||||
I.bottom = "0";
|
||||
case h.BOTTOM:
|
||||
A.bottom = "0";
|
||||
}
|
||||
var L = [];
|
||||
var U = [];
|
||||
return (
|
||||
k &&
|
||||
L.push(
|
||||
U.push(
|
||||
t().createElement(
|
||||
j,
|
||||
{
|
||||
key: "declineButton",
|
||||
style: N,
|
||||
style: R,
|
||||
className: O,
|
||||
id: g,
|
||||
id: C,
|
||||
"aria-label": D,
|
||||
onClick: function () {
|
||||
e.decline();
|
||||
@@ -589,14 +600,14 @@
|
||||
p
|
||||
)
|
||||
),
|
||||
L.push(
|
||||
U.push(
|
||||
t().createElement(
|
||||
j,
|
||||
{
|
||||
key: "acceptButton",
|
||||
style: _,
|
||||
className: y,
|
||||
id: h,
|
||||
style: N,
|
||||
className: d,
|
||||
id: m,
|
||||
"aria-label": P,
|
||||
onClick: function () {
|
||||
e.accept();
|
||||
@@ -605,23 +616,37 @@
|
||||
s
|
||||
)
|
||||
),
|
||||
x && L.reverse(),
|
||||
x && U.reverse(),
|
||||
t().createElement(
|
||||
w,
|
||||
{
|
||||
condition: T,
|
||||
wrapper: function (e) {
|
||||
return t().createElement("div", { style: A, className: B }, e);
|
||||
wrapper: function (n) {
|
||||
return t().createElement(
|
||||
"div",
|
||||
{
|
||||
style: V,
|
||||
className: B,
|
||||
onClick: function () {
|
||||
e.overlayClick();
|
||||
},
|
||||
},
|
||||
n
|
||||
);
|
||||
},
|
||||
},
|
||||
t().createElement(
|
||||
"div",
|
||||
{ className: "".concat(d), style: I },
|
||||
t().createElement("div", { style: R, className: b }, this.props.children),
|
||||
u({ className: "".concat(b), style: A }, I),
|
||||
t().createElement(
|
||||
"div",
|
||||
u({ style: L, className: y }, _),
|
||||
this.props.children
|
||||
),
|
||||
t().createElement(
|
||||
"div",
|
||||
{ className: "".concat(v) },
|
||||
L.map(function (e) {
|
||||
U.map(function (e) {
|
||||
return e;
|
||||
})
|
||||
)
|
||||
@@ -630,24 +655,24 @@
|
||||
);
|
||||
},
|
||||
},
|
||||
]) && d(n.prototype, o),
|
||||
]) && b(n.prototype, o),
|
||||
a
|
||||
);
|
||||
})(e.Component);
|
||||
(T.propTypes = {
|
||||
location: i().oneOf(
|
||||
Object.keys(m).map(function (e) {
|
||||
return m[e];
|
||||
Object.keys(h).map(function (e) {
|
||||
return h[e];
|
||||
})
|
||||
),
|
||||
visible: i().oneOf(
|
||||
Object.keys(S).map(function (e) {
|
||||
return S[e];
|
||||
Object.keys(g).map(function (e) {
|
||||
return g[e];
|
||||
})
|
||||
),
|
||||
sameSite: i().oneOf(
|
||||
Object.keys(g).map(function (e) {
|
||||
return g[e];
|
||||
Object.keys(C).map(function (e) {
|
||||
return C[e];
|
||||
})
|
||||
),
|
||||
style: i().object,
|
||||
@@ -684,17 +709,21 @@
|
||||
overlay: i().bool,
|
||||
overlayClasses: i().string,
|
||||
overlayStyle: i().object,
|
||||
onOverlayClick: i().func,
|
||||
acceptOnOverlayClick: i().bool,
|
||||
ariaAcceptLabel: i().string,
|
||||
ariaDeclineLabel: i().string,
|
||||
acceptOnScroll: i().bool,
|
||||
acceptOnScrollPercentage: i().number,
|
||||
customContentAttributes: i().object,
|
||||
customContainerAttributes: i().object,
|
||||
}),
|
||||
(T.defaultProps = {
|
||||
disableStyles: !1,
|
||||
hideOnAccept: !0,
|
||||
hideOnDecline: !0,
|
||||
location: m.BOTTOM,
|
||||
visible: S.BY_COOKIE_VALUE,
|
||||
location: h.BOTTOM,
|
||||
visible: g.BY_COOKIE_VALUE,
|
||||
onAccept: function () {},
|
||||
onDecline: function () {},
|
||||
cookieName: j,
|
||||
@@ -716,7 +745,7 @@
|
||||
disableButtonStyles: !1,
|
||||
enableDeclineButton: !1,
|
||||
flipButtons: !1,
|
||||
sameSite: g.LAX,
|
||||
sameSite: C.LAX,
|
||||
ButtonComponent: function (e) {
|
||||
var n = e.children,
|
||||
o = (function (e, t) {
|
||||
@@ -745,10 +774,14 @@
|
||||
},
|
||||
overlay: !1,
|
||||
overlayClasses: "",
|
||||
onOverlayClick: function () {},
|
||||
acceptOnOverlayClick: !1,
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
acceptOnScroll: !1,
|
||||
acceptOnScrollPercentage: 25,
|
||||
customContentAttributes: {},
|
||||
customContainerAttributes: {},
|
||||
});
|
||||
const B = T;
|
||||
})(),
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "react-cookie-consent",
|
||||
"version": "7.0.1",
|
||||
"version": "7.2.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "7.0.1",
|
||||
"version": "7.2.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-cookie": "^2.2.1",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "7.0.1",
|
||||
"version": "7.2.0",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
|
||||
7
src/index.d.ts
vendored
7
src/index.d.ts
vendored
@@ -13,6 +13,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
hideOnDecline?: boolean;
|
||||
onAccept?: (acceptedByScrolling?: boolean) => void;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
@@ -38,12 +39,14 @@ export interface CookieConsentProps {
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
onOverlayClick?: () => void;
|
||||
acceptOnOverlayClick?: boolean;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
customContentAttributes: object;
|
||||
customContainerAttributes: object;
|
||||
customContentAttributes?: object;
|
||||
customContainerAttributes?: object;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
23
src/index.js
23
src/index.js
@@ -159,6 +159,17 @@ class CookieConsent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a click on the overlay
|
||||
*/
|
||||
overlayClick() {
|
||||
const { acceptOnOverlayClick, onOverlayClick } = this.props;
|
||||
if (acceptOnOverlayClick) {
|
||||
this.accept();
|
||||
}
|
||||
onOverlayClick();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a persistent decline cookie
|
||||
*/
|
||||
@@ -369,7 +380,13 @@ class CookieConsent extends Component {
|
||||
<ConditionalWrapper
|
||||
condition={overlay}
|
||||
wrapper={(children) => (
|
||||
<div style={myOverlayStyle} className={overlayClasses}>
|
||||
<div
|
||||
style={myOverlayStyle}
|
||||
className={overlayClasses}
|
||||
onClick={() => {
|
||||
this.overlayClick();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
@@ -427,6 +444,8 @@ CookieConsent.propTypes = {
|
||||
overlay: PropTypes.bool,
|
||||
overlayClasses: PropTypes.string,
|
||||
overlayStyle: PropTypes.object,
|
||||
onOverlayClick: PropTypes.func,
|
||||
acceptOnOverlayClick: PropTypes.bool,
|
||||
ariaAcceptLabel: PropTypes.string,
|
||||
ariaDeclineLabel: PropTypes.string,
|
||||
acceptOnScroll: PropTypes.bool,
|
||||
@@ -466,6 +485,8 @@ CookieConsent.defaultProps = {
|
||||
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
|
||||
overlay: false,
|
||||
overlayClasses: "",
|
||||
onOverlayClick: () => {},
|
||||
acceptOnOverlayClick: false,
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
acceptOnScroll: false,
|
||||
|
||||
Reference in New Issue
Block a user