added onOverlayClick and acceptOnOverlayClick

CHANGELOG.md

@@ -5,7 +5,12 @@ 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).
 
-## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)
+## [[7.2.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.0)
+
+- Added `onOverlayClick` which allows you to react to a click on the overlay
+- Added `acceptOnOverlayClick` which accepts the cookies when the overlay is clicked and runs `onOverlayClick`
+
+## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.1)
 
 - `customContentAttributes` and `customContainerAttributes` are now optional in the typing file as they should be
 

README.md

@@ -138,7 +138,7 @@ That option would be interesting if you want to allow user to change their conse
 ## 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.            |
 | visible                   | string, "show", "hidden" or "byCookieValue" | "byCookieValue"                      | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence.                               |
 | children                  |          string or React component          |                                      | Content to appear inside the bar                                                                                                        |
@@ -181,6 +181,8 @@ That option would be interesting if you want to allow user to change their conse
 | acceptOnScrollPercentage  |                   number                    | 25                                   | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled                        |
 | customContentAttributes   |                   object                    | `{}`                                 | Allows you to set custom (data) attributes on the content div                                                                           |
 | customContainerAttributes |                   object                    | `{}`                                 | Allows you to set custom (data) attributes on the container div                                                                         |
+| onOverlayClick            |                  function                   | `() => {}`                           | allows you to react to a click on the overlay                                                                                           |
+| acceptOnOverlayClick      |                   boolean                   | false                                | Determines whether the cookies should be accepted after clicking on the overlay                                                         |
 
 ## Debugging it
 

src/index.d.ts

@@ -38,6 +38,8 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
+  onOverlayClick?: () => void;
+  acceptOnOverlayClick?: boolean;
   ariaAcceptLabel?: string;
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;

src/index.js

@@ -159,6 +159,17 @@ class CookieConsent extends Component {
     }
   }
 
+  /**
+   * Handle a click on the overlay
+   */
+  overlayClick() {
+    const { acceptOnOverlayClick, onOverlayClick } = this.props;
+    if (acceptOnOverlayClick) {
+      this.accept();
+    }
+    onOverlayClick();
+  }
+
   /**
    * Set a persistent decline cookie
    */
@@ -369,7 +380,13 @@ class CookieConsent extends Component {
       <ConditionalWrapper
         condition={overlay}
         wrapper={(children) => (
-          <div style={myOverlayStyle} className={overlayClasses}>
+          <div
+            style={myOverlayStyle}
+            className={overlayClasses}
+            onClick={() => {
+              this.overlayClick();
+            }}
+          >
             {children}
           </div>
         )}
@@ -427,6 +444,8 @@ CookieConsent.propTypes = {
   overlay: PropTypes.bool,
   overlayClasses: PropTypes.string,
   overlayStyle: PropTypes.object,
+  onOverlayClick: PropTypes.func,
+  acceptOnOverlayClick: PropTypes.bool,
   ariaAcceptLabel: PropTypes.string,
   ariaDeclineLabel: PropTypes.string,
   acceptOnScroll: PropTypes.bool,
@@ -466,6 +485,8 @@ CookieConsent.defaultProps = {
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
+  onOverlayClick: () => {},
+  acceptOnOverlayClick: false,
   ariaAcceptLabel: "Accept cookies",
   ariaDeclineLabel: "Decline cookies",
   acceptOnScroll: false,