react-cookie-consent - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

build/index.js

@@ -576,2 +576,4 @@ module.exports =
     };
+
+    _this.handleScroll = _this.handleScroll.bind(_this);
     return _this;
@@ -592,5 +594,36 @@ }
       }
+
+      // if acceptOnScroll is set to true, add a listener
+      if (this.props.acceptOnScroll) {
+        window.addEventListener("scroll", this.handleScroll, { passive: true });
+      }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // remove listener if still set
+      window.removeEventListener("scroll", this.handleScroll);
+    }
 
     /**
+     * checks whether scroll has exceeded set amount and fire accept if so.
+     */
+
+  }, {
+    key: "handleScroll",
+    value: function handleScroll() {
+      // (top / height) - height * 100
+      var rootNode = document.documentElement,
+          body = document.body,
+          top = "scrollTop",
+          height = "scrollHeight";
+
+      var percentage = (rootNode[top] || body[top]) / ((rootNode[height] || body[height]) - rootNode.clientHeight) * 100;
+
+      if (percentage > this.props.acceptOnScrollPercentage) {
+        this.accept();
+      }
+    }
+
+    /**
      * Set a persistent cookie
@@ -605,5 +638,11 @@ */
           expires = _props2.expires,
-          hideOnAccept = _props2.hideOnAccept;
+          hideOnAccept = _props2.hideOnAccept,
+          onAccept = _props2.onAccept;
 
+      // fire onAccept
 
+      onAccept();
+      // remove listener if set
+      window.removeEventListener("scroll", this.handleScroll);
+
       _jsCookie2.default.set(cookieName, true, { expires: expires });
@@ -630,3 +669,2 @@ if (hideOnAccept) {
           disableStyles = _props3.disableStyles,
-          onAccept = _props3.onAccept,
           buttonText = _props3.buttonText,
@@ -682,3 +720,2 @@ containerClasses = _props3.containerClasses,
               _this2.accept();
-              onAccept();
             }
@@ -710,3 +747,5 @@ },
   contentClasses: _propTypes2.default.string,
-  buttonClasses: _propTypes2.default.string
+  buttonClasses: _propTypes2.default.string,
+  acceptOnScroll: _propTypes2.default.bool,
+  acceptOnScrollPercentage: _propTypes2.default.number
 };
@@ -717,2 +756,4 @@
   hideOnAccept: true,
+  acceptOnScroll: false,
+  acceptOnScrollPercentage: 25,
   location: OPTIONS.BOTTOM,
@@ -719,0 +760,0 @@ onAccept: function onAccept() {},

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
@@ -10,0 +10,0 @@ "main": "build/index.js",

README.md

@@ -7,3 +7,2 @@ # :cookie: react-cookie-consent :cookie:
 
-
 Demo: https://mastermindzh.github.io/react-cookie-consent/
@@ -13,3 +12,2 @@
 
-
 ## Default look
@@ -19,6 +17,5 @@
 
-
 ## Installation
 
-```
+``` shell
 npm install react-cookie-consent
@@ -29,3 +26,3 @@ ```
 
-```
+``` shell
 yarn add react-cookie-consent
@@ -38,7 +35,9 @@ ```
 
-```js
+``` js
 import CookieConsent from "react-cookie-consent";
 ```
+
 If you want to set/remove cookies yourself you can optionally import Cookie (straight from js-cookie) like this:
-```js
+
+``` js
 import CookieConsent, { Cookies } from "react-cookie-consent";
@@ -49,3 +48,3 @@ ```
 
-```js
+```jsx
 <CookieConsent>
@@ -55,2 +54,3 @@ This website uses cookies to enhance the user experience.
 ```
+
 You can optionally set some props like this (next chapter will show all props):
@@ -91,10 +91,12 @@
 | 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                                                                          |
-| cookieName    | string                           | "CookieConsent" | Name of the cookie used to track whether the user has agreed.                                         |
-| onAccept      | function                         | `() => {}`     | Function to be called after the accept 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.                                                                   |
-| containerClasses| string                           | ""        | CSS classes to apply to the surrounding container |
-| buttonClasses | string                           | ""  | CSS classes to apply to the button|
-| contentClasses| string                           | "" | CSS classes to apply to the content                    |
+| 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                                                                        |
+| cookieName    | string                           | "CookieConsent" | Name of the cookie used to track whether the user has agreed.                                       |
+| onAccept      | function                         | `() => {}`     | Function to be called after the accept 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.                                                                   |
+| containerClasses| string                         | ""        | CSS classes to apply to the surrounding container                                                         |
+| buttonClasses | string                           | ""  | CSS classes to apply to the button                                                                              |
+| contentClasses| string                           | "" | CSS classes to apply to the content                                                                              |
 | style         | object                           | [look at source][style]        | React styling object for the bar.                                                    |
@@ -104,3 +106,2 @@ | buttonStyle   | object                           | [look at source][buttonStyle]  | React styling object for the button.                                                 |
 
-
 ## Debugging it
@@ -119,3 +120,2 @@
 
-
 ## Styling it
@@ -144,2 +144,3 @@
 #### changing the button font-weight to bold
+
 ```js
@@ -153,2 +154,3 @@ <CookieConsent
 #### Using predefined CSS classes
+
 You can pass predefined CSS classes to the components using the `containerClasses`, `buttonClasses` and `contentClasses` props. The example below uses bootstrap classes:
@@ -173,3 +175,3 @@
 
-![bootstrap styling](./images/css_classes.png)
+![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
 
@@ -176,0 +178,0 @@ #### rainbows!

src/index.js

@@ -45,2 +45,4 @@ import React, { Component } from "react";
     };
+
+    this.handleScroll = this.handleScroll.bind(this);
   }
@@ -55,10 +57,45 @@
     }
+
+    // if acceptOnScroll is set to true, add a listener
+    if (this.props.acceptOnScroll) {
+      window.addEventListener("scroll", this.handleScroll, { passive: true });
+    }
   }
 
+  componentWillUnmount() {
+    // remove listener if still set
+    window.removeEventListener("scroll", this.handleScroll);
+  }
+
   /**
+   * checks whether scroll has exceeded set amount and fire accept if so.
+   */
+  handleScroll() {
+    // (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 > this.props.acceptOnScrollPercentage) {
+      this.accept();
+    }
+  }
+
+  /**
    * Set a persistent cookie
    */
   accept() {
-    const { cookieName, expires, hideOnAccept } = this.props;
+    const { cookieName, expires, hideOnAccept, onAccept } = this.props;
 
+    // fire onAccept
+    onAccept();
+    // remove listener if set
+    window.removeEventListener("scroll", this.handleScroll);
+
     Cookies.set(cookieName, true, { expires: expires });
@@ -82,3 +119,2 @@ if (hideOnAccept) {
       disableStyles,
-      onAccept,
       buttonText,
@@ -129,3 +165,2 @@ containerClasses,
             this.accept();
-            onAccept();
           }}
@@ -149,3 +184,7 @@ >
   onAccept: PropTypes.func,
-  buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
+  buttonText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.element
+  ]),
   cookieName: PropTypes.string,
@@ -156,3 +195,5 @@ debug: PropTypes.bool,
   contentClasses: PropTypes.string,
-  buttonClasses: PropTypes.string
+  buttonClasses: PropTypes.string,
+  acceptOnScroll: PropTypes.bool,
+  acceptOnScrollPercentage: PropTypes.number
 };
@@ -163,2 +204,4 @@
   hideOnAccept: true,
+  acceptOnScroll: false,
+  acceptOnScrollPercentage: 25,
   location: OPTIONS.BOTTOM,
@@ -170,5 +213,5 @@ onAccept: () => {},
   expires: 365,
-  containerClasses:"",
-  contentClasses:"",
-  buttonClasses:""
+  containerClasses: "",
+  contentClasses: "",
+  buttonClasses: ""
 };
@@ -175,0 +218,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130348

increased by2.36%

Lines of code

1600

increased by4.58%

Number of lines in readme file

189

increased by1.07%

No dependency changes