added onOverlayClick and acceptOnOverlayClick

CHANGELOG.md

@@ -5,6 +5,15 @@ 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.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
+
 ## [[7.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
 
 - Added custom attribute props for content and container

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                                                                                                        |
@@ -179,10 +179,10 @@ That option would be interesting if you want to allow user to change their conse
 | 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                        |
-
-| 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 |
+| 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
 

build/index.d.ts

@@ -42,8 +42,8 @@ export interface CookieConsentProps {
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
-  customContentAttributes: object;
-  customContainerAttributes: object;
+  customContentAttributes?: object;
+  customContainerAttributes?: object;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cookie-consent",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "7.1.0",
+  "version": "7.1.1",
   "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

@@ -38,12 +38,14 @@ export interface CookieConsentProps {
   overlay?: boolean;
   overlayClasses?: string;
   overlayStyle?: object;
+  onOverlayClick?: () => void;
+  acceptOnOverlayClick?: boolean;
   ariaAcceptLabel?: string;
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
-  customContentAttributes: object;
-  customContainerAttributes: object;
+  customContentAttributes?: object;
+  customContainerAttributes?: object;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

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,