Added the (optional) scrolling effect back in as it is declared legal in some countries now.

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 build/index.js.LICENSE.txt
+example/*

CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[6.3.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3))]
+
+- Added the (optional) scrolling effect back in as it is declared legal in some countries now.
+
+## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)]
+
+- Added support for IE11, the webpack generated runtime-code should not use arrow functions
+
+## [[6.2.2](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.2)]
+
+- Fixed the return type of getCookieConsentValue in the dts file.
+
+## [[6.2.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.1)]
+
+Added the `getCookieConsentValue` to the dts file.
+
 ## [[6.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.0)]
 
 Added the exported function `getCookieConsentValue` to get the cookie value from custom code

README.md

@@ -84,12 +84,17 @@ You can optionally set some props like this (next chapter will show all props):
 </CookieConsent>
 ```
 
-One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:
+One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property `acceptedByScrolling` to indicate if the acceptance was triggered by the user scrolling You can provide a function like so:
 
 ```js
 <CookieConsent
-  onAccept={() => {
+  onAccept={(acceptedByScrolling) => {
+    if (acceptedByScrolling) {
+      // triggered if user scrolls past threshold
+      alert("Accept was triggered by user scrolling");
+    } else {
       alert("Accept was triggered by clicking the Accept button");
+    }
   }}
 ></CookieConsent>
 ```
@@ -118,7 +123,7 @@ console.log(getCookieConsentValue());
 ## Props
 
 | Prop                     |               Type                | Default value                        | Description                                                                                                                             |
-| -------------------- | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------ | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
 | location                 | string, "top", "bottom" or "none" | "bottom"                             | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable.            |
 | children                 |     string or React component     |                                      | Content to appear inside the bar                                                                                                        |
 | disableStyles            |              boolean              | false                                | If enabled the component will have no default style. (you can still supply style through props)                                         |
@@ -156,6 +161,8 @@ console.log(getCookieConsentValue());
 | cookieSecurity           |              boolean              | undefined                            | Cookie security level. Defaults to true unless running on http.                                                                         |
 | ariaAcceptLabel          |              string               | Accept cookies                       | Aria label to set on the accept button                                                                                                  |
 | ariaDeclineLabel         |              string               | Decline cookies                      | Aria label to set on the decline button                                                                                                 |
+| acceptOnScroll           |              boolean              | false                                | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage)                       |
+| acceptOnScrollPercentage |              number               | 25                                   | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled                        |
 
 ## Debugging it
 
@@ -229,6 +236,23 @@ Which results in:
 
 ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
 
+#### Accept on scroll
+
+You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.
+It is legal in some use-cases, [Italy](https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9679893) being one of them. Consult your legislation on whether this is allowed.
+
+```js
+<CookieConsent
+  acceptOnScroll={true}
+  acceptOnScrollPercentage={50}
+  onAccept={(byScroll) => {
+    alert(`consent given. \n\n By scrolling? ${byScroll}`);
+  }}
+>
+  Hello scroller :)
+</CookieConsent>
+```
+
 #### Flipping the buttons
 
 If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

build/index.d.ts

@@ -43,4 +43,12 @@ export interface CookieConsentProps {
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
 
+/**
+ * Returns the value of the consent cookie
+ * Retrieves the regular value first and if not found the legacy one according
+ * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+ * @param {*} name optional name of the cookie
+ */
+export function getCookieConsentValue(name?: string): string;
+
 export { Cookies };

build/index.js

@@ -1,15 +1,25 @@
 /*! For license information please see index.js.LICENSE.txt */
-module.exports = (() => {
+module.exports = (function () {
   var e = {
-      866: (e, t, n) => {
+      866: function (e, t, n) {
         "use strict";
         n.r(t),
           n.d(t, {
-            Cookies: () => s(),
-            OPTIONS: () => h,
-            SAME_SITE_OPTIONS: () => m,
-            default: () => j,
-            getCookieConsentValue: () => g,
+            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),
@@ -509,7 +519,7 @@ module.exports = (() => {
           });
         const j = x;
       },
-      808: (e, t, n) => {
+      808: function (e, t, n) {
         var o, r, i;
         void 0 ===
           (r =
@@ -594,7 +604,7 @@ module.exports = (() => {
               : o) || (e.exports = r),
           (e.exports = i());
       },
-      703: (e, t, n) => {
+      703: function (e, t, n) {
         "use strict";
         var o = n(414);
         function r() {}
@@ -638,10 +648,10 @@ module.exports = (() => {
             return (n.PropTypes = n), n;
           });
       },
-      697: (e, t, n) => {
+      697: function (e, t, n) {
         e.exports = n(703)();
       },
-      414: (e) => {
+      414: function (e) {
         "use strict";
         e.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
       },
@@ -653,16 +663,25 @@ module.exports = (() => {
     return e[o](r, r.exports, n), r.exports;
   }
   return (
-    (n.n = (e) => {
-      var t = e && e.__esModule ? () => e.default : () => e;
+    (n.n = function (e) {
+      var t =
+        e && e.__esModule
+          ? function () {
+              return e.default;
+            }
+          : function () {
+              return e;
+            };
       return n.d(t, { a: t }), t;
     }),
-    (n.d = (e, t) => {
+    (n.d = function (e, t) {
       for (var o in t)
         n.o(t, o) && !n.o(e, o) && Object.defineProperty(e, o, { enumerable: !0, get: t[o] });
     }),
-    (n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)),
-    (n.r = (e) => {
+    (n.o = function (e, t) {
+      return Object.prototype.hasOwnProperty.call(e, t);
+    }),
+    (n.r = function (e) {
       "undefined" != typeof Symbol &&
         Symbol.toStringTag &&
         Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "6.1.0",
+  "version": "6.2.4",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: Function;
+  onAccept?: (acceptedByScrolling?: boolean) => void;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -39,8 +39,18 @@ export interface CookieConsentProps {
   overlayStyle?: object;
   ariaAcceptLabel?: string;
   ariaDeclineLabel?: string;
+  acceptOnScroll?: boolean;
+  acceptOnScrollPercentage?: number;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
 
+/**
+ * Returns the value of the consent cookie
+ * Retrieves the regular value first and if not found the legacy one according
+ * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+ * @param {*} name optional name of the cookie
+ */
+export function getCookieConsentValue(name?: string): string;
+
 export { Cookies };

src/index.js

@@ -116,21 +116,31 @@ class CookieConsent extends Component {
     // if cookie undefined or debug
     if (this.getCookieValue() === undefined || debug) {
       this.setState({ visible: true });
+      // if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
+      if (this.props.acceptOnScroll) {
+        window.addEventListener("scroll", this.handleScroll, { passive: true });
       }
     }
+  }
+
+  componentWillUnmount() {
+    // remove listener if still set
+    this.removeScrollListener();
+  }
 
   /**
    * Set a persistent accept cookie
    */
-  accept() {
+  accept(acceptedByScrolling = false) {
     const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
     this.setCookie(cookieName, cookieValue);
 
-    onAccept();
+    onAccept(acceptedByScrolling ?? false);
 
     if (hideOnAccept) {
       this.setState({ visible: false });
+      this.removeScrollListener();
     }
   }
 
@@ -138,13 +148,8 @@ class CookieConsent extends Component {
    * Set a persistent decline cookie
    */
   decline() {
-    const {
-      cookieName,
-      declineCookieValue,
-      hideOnDecline,
-      onDecline,
-      setDeclineCookie,
-    } = this.props;
+    const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
+      this.props;
 
     if (setDeclineCookie) {
       this.setCookie(cookieName, declineCookieValue);
@@ -191,6 +196,35 @@ class CookieConsent extends Component {
     return getCookieConsentValue(cookieName);
   }
 
+  /**
+   * checks whether scroll has exceeded set amount and fire accept if so.
+   */
+  handleScroll = () => {
+    const { acceptOnScrollPercentage } = this.props;
+
+    // (top / height) - height * 100
+    let rootNode = document.documentElement,
+      body = document.body,
+      top = "scrollTop",
+      height = "scrollHeight";
+
+    let percentage =
+      ((rootNode[top] || body[top]) /
+        ((rootNode[height] || body[height]) - rootNode.clientHeight)) *
+      100;
+
+    if (percentage > acceptOnScrollPercentage) {
+      this.accept(true);
+    }
+  };
+
+  removeScrollListener = () => {
+    const { acceptOnScroll } = this.props;
+    if (acceptOnScroll) {
+      window.removeEventListener("scroll", this.handleScroll);
+    }
+  };
+
   render() {
     // If the bar shouldn't be visible don't render anything.
     if (!this.state.visible) {
@@ -369,6 +403,8 @@ CookieConsent.propTypes = {
   overlayStyle: PropTypes.object,
   ariaAcceptLabel: PropTypes.string,
   ariaDeclineLabel: PropTypes.string,
+  acceptOnScroll: PropTypes.bool,
+  acceptOnScrollPercentage: PropTypes.number,
 };
 
 CookieConsent.defaultProps = {
@@ -403,6 +439,8 @@ CookieConsent.defaultProps = {
   overlayClasses: "",
   ariaAcceptLabel: "Accept cookies",
   ariaDeclineLabel: "Decline cookies",
+  acceptOnScroll: false,
+  acceptOnScrollPercentage: 25,
 };
 
 export default CookieConsent;

webpack.config.js

@@ -7,6 +7,9 @@ module.exports = {
     path: path.resolve(__dirname, "build"),
     filename: "index.js",
     libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
+    environment: {
+      arrowFunction: false, // the generated runtime-code should not use arrow functions
+    },
   },
   module: {
     rules: [