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,37 @@ 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
+
+## [[6.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.1.0)]
+
+Added support for React 17
+
+## [[6.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.0.0)]
+
+### removed
+
+Accepting by scrolling is no longer allowed and has thus been removed from the package.
+For details see [issue 88](https://github.com/Mastermindzh/react-cookie-consent/issues/88)
+
 ## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
 
 ### added

README.md

@@ -22,7 +22,7 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 - [Using it](#using-it)
 - [Props](#props)
 - [Debugging it](#debugging-it)
-- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
+- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
 - [Styling it](#styling-it)
   - [Examples](#examples)
     - [Changing the bar background to red](#changing-the-bar-background-to-red)
@@ -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>
 ```
@@ -105,10 +110,20 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 ></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
 
 | 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)                                         |
@@ -146,6 +161,8 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 | 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
 
@@ -219,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,14 +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(),
+            Cookies: function () {
-            OPTIONS: () => O,
+              return s();
-            SAME_SITE_OPTIONS: () => v,
+            },
-            default: () => 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),
@@ -59,7 +70,7 @@ module.exports = (() => {
             var n = null != arguments[t] ? arguments[t] : {};
             t % 2
               ? p(Object(n), !0).forEach(function (t) {
-                  y(e, t, n[t]);
+                  b(e, t, n[t]);
                 })
               : Object.getOwnPropertyDescriptors
               ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n))
@@ -69,7 +80,7 @@ module.exports = (() => {
           }
           return e;
         }
-        function y(e, t, n) {
+        function b(e, t, n) {
           return (
             t in e
               ? Object.defineProperty(e, t, {
@@ -82,7 +93,7 @@ module.exports = (() => {
             e
           );
         }
-        function b(e, t) {
+        function y(e, t) {
           for (var n = 0; n < t.length; n++) {
             var o = t[n];
             (o.enumerable = o.enumerable || !1),
@@ -98,7 +109,7 @@ module.exports = (() => {
               return (e.__proto__ = t), e;
             })(e, t);
         }
-        function m(e, t) {
+        function v(e, t) {
           return !t || ("object" !== l(t) && "function" != typeof t)
             ? (function (e) {
                 if (void 0 === e)
@@ -109,22 +120,31 @@ module.exports = (() => {
               })(e)
             : t;
         }
-        function h(e) {
+        function O(e) {
-          return (h = Object.setPrototypeOf
+          return (O = Object.setPrototypeOf
             ? Object.getPrototypeOf
             : function (e) {
                 return e.__proto__ || Object.getPrototypeOf(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,
               n = e.wrapper,
               o = e.children;
             return t ? n(o) : o;
           },
-          C = (function (e) {
+          x = (function (e) {
             !(function (e, t) {
               if ("function" != typeof t && null !== t)
                 throw new TypeError("Super expression must either be null or a function");
@@ -153,12 +173,12 @@ module.exports = (() => {
                 })()),
                 function () {
                   var e,
-                    t = h(o);
+                    t = O(o);
                   if (i) {
-                    var n = h(this).constructor;
+                    var n = O(this).constructor;
                     e = Reflect.construct(t, arguments, n);
                   } else e = t.apply(this, arguments);
-                  return m(this, e);
+                  return v(this, e);
                 });
             function a(e) {
               var t;
@@ -250,12 +270,6 @@ module.exports = (() => {
                       o && this.setState({ visible: !1 });
                   },
                 },
-                {
-                  key: "getLegacyCookieName",
-                  value: function (e) {
-                    return "".concat(e, "-legacy");
-                  },
-                },
                 {
                   key: "setCookie",
                   value: function (e, t) {
@@ -266,15 +280,14 @@ module.exports = (() => {
                       c = this.props.cookieSecurity;
                     void 0 === c && (c = !location || "https:" === location.protocol);
                     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",
                   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 +304,15 @@ module.exports = (() => {
                       s = t.disableStyles,
                       l = t.buttonText,
                       p = t.declineButtonText,
-                      y = t.containerClasses,
+                      b = t.containerClasses,
-                      b = t.contentClasses,
+                      y = t.contentClasses,
                       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,
-                      k = t.enableDeclineButton,
+                      C = t.enableDeclineButton,
                       x = t.flipButtons,
                       j = t.ButtonComponent,
                       T = t.overlay,
@@ -308,43 +321,43 @@ module.exports = (() => {
                       P = t.ariaAcceptLabel,
                       D = t.ariaDeclineLabel,
                       E = {},
-                      N = {},
                       I = {},
+                      N = {},
                       _ = {},
                       R = {};
                     switch (
                       (s
                         ? ((E = u({}, o)),
-                          (N = u({}, i)),
+                          (I = u({}, i)),
-                          (I = u({}, c)),
+                          (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
-                            ? ((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)
                     ) {
-                      case O.TOP:
+                      case h.TOP:
                         E.top = "0";
                         break;
-                      case O.BOTTOM:
+                      case h.BOTTOM:
                         E.bottom = "0";
                     }
                     var A = [];
                     return (
-                      k &&
+                      C &&
                         A.push(
                           r().createElement(
                             j,
                             {
                               key: "declineButton",
-                              style: I,
+                              style: N,
-                              className: h,
+                              className: O,
-                              id: C,
+                              id: g,
                               "aria-label": D,
                               onClick: function () {
                                 e.decline();
@@ -358,9 +371,9 @@ module.exports = (() => {
                           j,
                           {
                             key: "acceptButton",
-                            style: N,
+                            style: I,
                             className: d,
-                            id: v,
+                            id: m,
                             "aria-label": P,
                             onClick: function () {
                               e.accept();
@@ -371,7 +384,7 @@ module.exports = (() => {
                       ),
                       x && A.reverse(),
                       r().createElement(
-                        g,
+                        k,
                         {
                           condition: T,
                           wrapper: function (e) {
@@ -380,11 +393,11 @@ module.exports = (() => {
                         },
                         r().createElement(
                           "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(
                             "div",
-                            { className: "".concat(m) },
+                            { className: "".concat(v) },
                             A.map(function (e) {
                               return e;
                             })
@@ -394,19 +407,19 @@ module.exports = (() => {
                     );
                   },
                 },
-              ]) && b(t.prototype, n),
+              ]) && y(t.prototype, n),
               a
             );
           })(o.Component);
-        (C.propTypes = {
+        (x.propTypes = {
           location: c().oneOf(
-            Object.keys(O).map(function (e) {
+            Object.keys(h).map(function (e) {
-              return O[e];
+              return h[e];
             })
           ),
           sameSite: c().oneOf(
-            Object.keys(v).map(function (e) {
+            Object.keys(m).map(function (e) {
-              return v[e];
+              return m[e];
             })
           ),
           style: c().object,
@@ -446,14 +459,14 @@ module.exports = (() => {
           ariaAcceptLabel: c().string,
           ariaDeclineLabel: c().string,
         }),
-          (C.defaultProps = {
+          (x.defaultProps = {
             disableStyles: !1,
             hideOnAccept: !0,
             hideOnDecline: !0,
-            location: O.BOTTOM,
+            location: h.BOTTOM,
             onAccept: function () {},
             onDecline: function () {},
-            cookieName: "CookieConsent",
+            cookieName: C,
             cookieValue: !0,
             declineCookieValue: !1,
             setDeclineCookie: !0,
@@ -472,7 +485,7 @@ module.exports = (() => {
             disableButtonStyles: !1,
             enableDeclineButton: !1,
             flipButtons: !1,
-            sameSite: v.LAX,
+            sameSite: m.LAX,
             ButtonComponent: function (e) {
               var t = e.children,
                 n = (function (e, t) {
@@ -504,9 +517,9 @@ module.exports = (() => {
             ariaAcceptLabel: "Accept cookies",
             ariaDeclineLabel: "Decline cookies",
           });
-        const S = C;
+        const j = x;
       },
-      808: (e, t, n) => {
+      808: function (e, t, n) {
         var o, r, i;
         void 0 ===
           (r =
@@ -591,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() {}
@@ -635,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";
       },
@@ -650,16 +663,25 @@ module.exports = (() => {
     return e[o](r, r.exports, n), r.exports;
   }
   return (
-    (n.n = (e) => {
+    (n.n = function (e) {
-      var t = e && e.__esModule ? () => e.default : () => 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.o = function (e, t) {
-    (n.r = (e) => {
+      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.0.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",
@@ -21,7 +21,8 @@
     "patch": "npm --no-git-tag-version version patch",
     "minor": "npm --no-git-tag-version version minor",
     "major": "npm --no-git-tag-version version major",
-    "release": "npm run build && git add -A && PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag $PACKAGE_VERSION && git commit -m 'release $PACKAGE_VERSION' && git push && git push --tags && npm publish",
+    "preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )",
+    "release": "npm run build && git add -A && git tag $npm_package_version && git commit -m 'release $npm_package_version' && git push && git push --tags && npm publish",
     "release-patch": "npm run patch && npm run release",
     "release-minor": "npm run minor && npm run release",
     "release-major": "npm run major && npm run release"

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

@@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
   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
  * @param {object} wrappingOptions
@@ -87,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();
     }
   }
 
@@ -109,13 +148,8 @@ class CookieConsent extends Component {
    * Set a persistent decline cookie
    */
   decline() {
-    const {
+    const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
-      cookieName,
+      this.props;
-      declineCookieValue,
-      hideOnDecline,
-      onDecline,
-      setDeclineCookie,
-    } = this.props;
 
     if (setDeclineCookie) {
       this.setCookie(cookieName, declineCookieValue);
@@ -128,14 +162,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
    * Sets two cookies to handle incompatible browsers, more details:
@@ -153,7 +179,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
     if (sameSite === SAME_SITE_OPTIONS.NONE) {
-      Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
+      Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
     }
 
     // set the regular cookie
@@ -167,15 +193,37 @@ class CookieConsent extends Component {
    */
   getCookieValue() {
     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;
+
+  /**
+   * 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.
@@ -355,6 +403,8 @@ CookieConsent.propTypes = {
   overlayStyle: PropTypes.object,
   ariaAcceptLabel: PropTypes.string,
   ariaDeclineLabel: PropTypes.string,
+  acceptOnScroll: PropTypes.bool,
+  acceptOnScrollPercentage: PropTypes.number,
 };
 
 CookieConsent.defaultProps = {
@@ -364,7 +414,7 @@ CookieConsent.defaultProps = {
   location: OPTIONS.BOTTOM,
   onAccept: () => {},
   onDecline: () => {},
-  cookieName: "CookieConsent",
+  cookieName: defaultCookieConsentName,
   cookieValue: true,
   declineCookieValue: false,
   setDeclineCookie: true,
@@ -389,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: [