mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-11-04 10:48:57 +01:00
Code Issues Projects Releases Wiki Activity

minor bugfixes for PR https://github.com/Mastermindzh/react-cookie-consent/pull/68

Browse Source 
- extracted code which handles setting/getting cookies.
- added correct implementation of the legacy cookie fix according to the provided url
- added cookieSecurity attribute with default value based on runtime environment
- updated README
- ran builds
This commit is contained in:
Rick van Lieshout
2020-05-23 22:36:28 +02:00
parent d7bfb5bfbd
commit a64cbc28f9
5 changed files with 197 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@@ -89,40 +89,42 @@ If the decline button is enabled then the (onDecline) prop function can be used,
## 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) |
| 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 |
| 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 | `({ acceptedByScrolling }) => {}` | 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 |
| 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 |
| 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. |
| 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. |
| 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) |
| 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 |
| 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 | `({ acceptedByScrolling }) => {}` | 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 |
| 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 |
| 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. |
| 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 | location ? location.protocol === "https:" : true | Cookie security level. Defaults to true unless running on http. |
## Debugging it
@@ -132,7 +134,7 @@ Because the cookie consent bar will be hidden once accepted, you will have to se
<CookieConsent debug={true}></CookieConsent>
```
**Note:** Dont forget to remove the `debug`-property for production.
**Note:** Don't forget to remove the `debug`-property for production.
## Styling it

2
build/index.d.ts vendored
View File

@@ -3,6 +3,8 @@ import Cookies from "js-cookie";
export interface CookieConsentProps {
location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none";
cookieSecurity?: boolean;
style?: object;
buttonStyle?: object;
declineButtonStyle?: object;

121
build/index.js
View File

@@ -506,7 +506,7 @@ module.exports = require("react");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Cookies = exports.OPTIONS = undefined;
exports.Cookies = exports.SAME_SITE_OPTIONS = exports.OPTIONS = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -540,6 +540,12 @@ var OPTIONS = exports.OPTIONS = {
NONE: "none"
};
var SAME_SITE_OPTIONS = exports.SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none"
};
var CookieConsent = function (_Component) {
_inherits(CookieConsent, _Component);
@@ -599,19 +605,17 @@ var CookieConsent = function (_Component) {
_createClass(CookieConsent, [{
key: "componentDidMount",
value: function componentDidMount() {
var _props = this.props,
cookieName = _props.cookieName,
debug = _props.debug;
var debug = this.props.debug;
// if cookie undefined or debug
if (_jsCookie2.default.get(cookieName) === undefined || 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 && (_jsCookie2.default.get(cookieName) === undefined || debug)) {
window.addEventListener("scroll", this.handleScroll, { passive: 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 });
}
}
}
}, {
@@ -650,13 +654,11 @@ var CookieConsent = function (_Component) {
value: function accept(_ref) {
var _ref$acceptedByScroll = _ref.acceptedByScrolling,
acceptedByScrolling = _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll;
var _props2 = this.props,
cookieName = _props2.cookieName,
cookieValue = _props2.cookieValue,
expires = _props2.expires,
hideOnAccept = _props2.hideOnAccept,
onAccept = _props2.onAccept,
extraCookieOptions = _props2.extraCookieOptions;
var _props = this.props,
cookieName = _props.cookieName,
cookieValue = _props.cookieValue,
hideOnAccept = _props.hideOnAccept,
onAccept = _props.onAccept;
// fire onAccept
@@ -665,7 +667,7 @@ var CookieConsent = function (_Component) {
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
_jsCookie2.default.set(cookieName, cookieValue, _extends({ expires: expires }, extraCookieOptions));
this.setCookie(cookieName, cookieValue);
if (hideOnAccept) {
this.setState({ visible: false });
@@ -679,14 +681,14 @@ var CookieConsent = function (_Component) {
}, {
key: "decline",
value: function decline() {
var _props3 = this.props,
cookieName = _props3.cookieName,
declineCookieValue = _props3.declineCookieValue,
expires = _props3.expires,
hideOnDecline = _props3.hideOnDecline,
onDecline = _props3.onDecline,
extraCookieOptions = _props3.extraCookieOptions,
setDeclineCookie = _props3.setDeclineCookie;
var _props2 = this.props,
cookieName = _props2.cookieName,
declineCookieValue = _props2.declineCookieValue,
expires = _props2.expires,
hideOnDecline = _props2.hideOnDecline,
onDecline = _props2.onDecline,
extraCookieOptions = _props2.extraCookieOptions,
setDeclineCookie = _props2.setDeclineCookie;
// fire onDecline
@@ -696,13 +698,72 @@ var CookieConsent = function (_Component) {
window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie) {
_jsCookie2.default.set(cookieName, declineCookieValue, _extends({ expires: expires }, extraCookieOptions));
this.setCookie(cookieName, declineCookieValue);
}
if (hideOnDecline) {
this.setState({ visible: false });
}
}
/**
* Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get
*/
}, {
key: "getLegacyCookieName",
value: function 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:
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
}, {
key: "setCookie",
value: function setCookie(cookieName, cookieValue) {
var _props3 = this.props,
extraCookieOptions = _props3.extraCookieOptions,
expires = _props3.expires,
sameSite = _props3.sameSite,
cookieSecurity = _props3.cookieSecurity;
var cookieOptions = _extends({ expires: expires }, extraCookieOptions, { sameSite: sameSite, secure: cookieSecurity });
// 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) {
_jsCookie2.default.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
}
// set the regular cookie
_jsCookie2.default.set(cookieName, cookieValue, cookieOptions);
}
/**
* 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
*/
}, {
key: "getCookieValue",
value: function getCookieValue() {
var cookieName = this.props.cookieName;
var cookieValue = _jsCookie2.default.get(cookieName);
// if the cookieValue is undefined check for the legacy cookie
if (cookieValue === undefined) {
cookieValue = _jsCookie2.default.get(this.getLegacyCookieName(cookieName));
}
return cookieValue;
}
}, {
key: "render",
value: function render() {
@@ -834,6 +895,9 @@ CookieConsent.propTypes = {
location: _propTypes2.default.oneOf(Object.keys(OPTIONS).map(function (key) {
return OPTIONS[key];
})),
sameSite: _propTypes2.default.oneOf(Object.keys(SAME_SITE_OPTIONS).map(function (key) {
return SAME_SITE_OPTIONS[key];
})),
style: _propTypes2.default.object,
buttonStyle: _propTypes2.default.object,
declineButtonStyle: _propTypes2.default.object,
@@ -865,7 +929,8 @@ CookieConsent.propTypes = {
disableButtonStyles: _propTypes2.default.bool,
enableDeclineButton: _propTypes2.default.bool,
flipButtons: _propTypes2.default.bool,
ButtonComponent: _propTypes2.default.elementType
ButtonComponent: _propTypes2.default.elementType,
cookieSecurity: _propTypes2.default.bool
};
CookieConsent.defaultProps = {
@@ -896,6 +961,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false,
enableDeclineButton: false,
flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: function ButtonComponent(_ref2) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, ["children"]);

3
src/index.d.ts vendored
View File

@@ -2,8 +2,9 @@ import * as React from "react";
import Cookies from "js-cookie";
export interface CookieConsentProps {
sameSite?: "strict" | "lax" | "none";
location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none";
cookieSecurity?: boolean;
style?: object;
buttonStyle?: object;
declineButtonStyle?: object;

99
src/index.js
View File

@@ -8,11 +8,11 @@ export const OPTIONS = {
NONE: "none",
};
export const SAMESITE_OPTIONS = {
export const SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none",
}
};
class CookieConsent extends Component {
constructor(props) {
@@ -65,16 +65,16 @@ class CookieConsent extends Component {
}
componentDidMount() {
const { cookieName, debug } = this.props;
const { debug } = this.props;
// if cookie undefined or debug
if (Cookies.get(cookieName) === undefined || 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 && (Cookies.get(cookieName) === undefined || debug)) {
window.addEventListener("scroll", this.handleScroll, { passive: 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 });
}
}
}
@@ -107,15 +107,7 @@ class CookieConsent extends Component {
* Set a persistent accept cookie
*/
accept({ acceptedByScrolling = false }) {
const {
cookieName,
cookieValue,
expires,
hideOnAccept,
onAccept,
extraCookieOptions,
sameSite,
} = this.props;
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
// fire onAccept
onAccept({ acceptedByScrolling });
@@ -123,14 +115,7 @@ class CookieConsent extends Component {
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
if (sameSite === SAMESITE_OPTIONS.NONE) {
Cookies.set(cookieName, cookieValue, { expires, sameSite, secure: true, ...extraCookieOptions });
// Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/sameSite-cookie-recipes/#handling-incompatible-clients
Cookies.set(cookieName, cookieValue, { expires, secure: true, ...extraCookieOptions });
} else {
Cookies.set(cookieName, cookieValue, { expires, sameSite, ...extraCookieOptions });
}
this.setCookie(cookieName, cookieValue);
if (hideOnAccept) {
this.setState({ visible: false });
@@ -149,7 +134,6 @@ class CookieConsent extends Component {
onDecline,
extraCookieOptions,
setDeclineCookie,
sameSite,
} = this.props;
// fire onDecline
@@ -158,13 +142,8 @@ class CookieConsent extends Component {
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie && sameSite === SAMESITE_OPTIONS.NONE) {
Cookies.set(cookieName, declineCookieValue, { expires, sameSite, secure: true, ...extraCookieOptions });
// Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/sameSite-cookie-recipes/#handling-incompatible-clients
Cookies.set(cookieName, declineCookieValue, { expires, secure: true, ...extraCookieOptions });
} else if (setDeclineCookie) {
Cookies.set(cookieName, declineCookieValue, { expires, sameSite, ...extraCookieOptions });
if (setDeclineCookie) {
this.setCookie(cookieName, declineCookieValue);
}
if (hideOnDecline) {
@@ -172,6 +151,50 @@ 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:
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
setCookie(cookieName, cookieValue) {
const { extraCookieOptions, expires, sameSite, cookieSecurity } = this.props;
let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };
// 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);
}
// set the regular cookie
Cookies.set(cookieName, cookieValue, cookieOptions);
}
/**
* 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
*/
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;
}
render() {
// If the bar shouldn't be visible don't render anything.
if (!this.state.visible) {
@@ -294,7 +317,7 @@ class CookieConsent extends Component {
CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
sameSite: PropTypes.oneOf(Object.keys(SAMESITE_OPTIONS).map((key) => SAMESITE_OPTIONS[key])),
sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])),
style: PropTypes.object,
buttonStyle: PropTypes.object,
declineButtonStyle: PropTypes.object,
@@ -327,6 +350,7 @@ CookieConsent.propTypes = {
enableDeclineButton: PropTypes.bool,
flipButtons: PropTypes.bool,
ButtonComponent: PropTypes.elementType,
cookieSecurity: PropTypes.bool,
};
CookieConsent.defaultProps = {
@@ -336,9 +360,8 @@ CookieConsent.defaultProps = {
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
location: OPTIONS.BOTTOM,
sameSite: SAMESITE_OPTIONS.STRICT,
onAccept: () => { },
onDecline: () => { },
onAccept: () => {},
onDecline: () => {},
cookieName: "CookieConsent",
cookieValue: true,
declineCookieValue: false,
@@ -358,6 +381,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false,
enableDeclineButton: false,
flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
};