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 +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,16 +22,16 @@ 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)
-    - [changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
+    - [Changing the bar background to red](#changing-the-bar-background-to-red)
+    - [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
     - [Using predefined CSS classes](#using-predefined-css-classes)
     - [Flipping the buttons](#flipping-the-buttons)
     - [Extra cookie options](#extra-cookie-options)
-    - [rainbows!](#rainbows)
-- [contributor information](#contributor-information)
+    - [Rainbows!](#rainbows)
+- [Contributor information](#contributor-information)
 - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
 
 <!-- tocstop -->
@@ -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
 
@@ -186,13 +203,13 @@ You can use `disableStyles={true}` to disable any built-in styling.
 
 ### Examples
 
-#### changing the bar background to red
+#### Changing the bar background to red
 
 ```js
 <CookieConsent style={{ background: "red" }}></CookieConsent>
 ```
 
-#### changing the button font-weight to bold
+#### Changing the button font-weight to bold
 
 ```js
 <CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>
@@ -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:
@@ -241,7 +275,7 @@ You can add more cookie options using the extraCookieOptions parameter like so:
 <CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
 ```
 
-#### rainbows!
+#### Rainbows!
 
 ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)
 
@@ -287,7 +321,7 @@ You can also generate a page-obfuscating overlay that will prevent actions other
 [contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55
 [overlaystyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L62-L69
 
-## contributor information
+## Contributor information
 
 When making a PR please think about the following things:
 

build/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
+  onAccept?: Function;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
   declineButtonClasses?: string;
   buttonId?: string;
   declineButtonId?: string;
-  acceptOnScroll?: boolean;
-  acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
   disableButtonStyles?: boolean;
   enableDeclineButton?: boolean;
@@ -45,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 };

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "5.2.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",
@@ -13,7 +13,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": "^16.13.1 || ^17.0.0"
   },
   "scripts": {
     "build": "webpack",
@@ -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?: () => void;
+  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
@@ -28,7 +57,6 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
 class CookieConsent extends Component {
   constructor(props) {
     super(props);
-    this.accept.bind(this);
 
     this.state = {
       visible: false,
@@ -88,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();
     }
   }
 
@@ -110,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);
@@ -129,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:
@@ -154,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
@@ -168,15 +193,37 @@ class CookieConsent extends Component {
    */
   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 getCookieConsentValue(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.
@@ -281,7 +328,9 @@ class CookieConsent extends Component {
         className={buttonClasses}
         id={buttonId}
         aria-label={ariaAcceptLabel}
-        onClick={this.accept}
+        onClick={() => {
+          this.accept();
+        }}
       >
         {buttonText}
       </ButtonComponent>
@@ -354,6 +403,8 @@ CookieConsent.propTypes = {
   overlayStyle: PropTypes.object,
   ariaAcceptLabel: PropTypes.string,
   ariaDeclineLabel: PropTypes.string,
+  acceptOnScroll: PropTypes.bool,
+  acceptOnScrollPercentage: PropTypes.number,
 };
 
 CookieConsent.defaultProps = {
@@ -363,7 +414,7 @@ CookieConsent.defaultProps = {
   location: OPTIONS.BOTTOM,
   onAccept: () => {},
   onDecline: () => {},
-  cookieName: "CookieConsent",
+  cookieName: defaultCookieConsentName,
   cookieValue: true,
   declineCookieValue: false,
   setDeclineCookie: true,
@@ -388,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: [