Added custom attribute props for content and container

Co-authored-by: Peter Krieg <pkrieg2@gmail.com>

CHANGELOG.md

@@ -5,6 +5,18 @@ 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.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)]
+
+- Added custom attribute props for content and container
+
+## [[7.0.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.1)]
+
+- Configured webpack to remove self from build artefact. Should now work in Nextjs and Gatsby (only tested those..)
+
+## [[7.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.0.0)]
+
+- Switched from CommonJS to UMD module
+
 ## [[6.4.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1))]
 
 - Added missing typing

README.md

@@ -174,12 +174,16 @@ That option would be interesting if you want to allow user to change their conse
 | flipButtons              |                   boolean                   | false                                | If enabled the accept and decline buttons will be flipped                                                                               |
 | ButtonComponent          |               React component               | button                               | React Component to render as a button.                                                                                                  |
 | sameSite                 |      string, "strict", "lax" or "none"      | none                                 | Cookies sameSite attribute value                                                                                                        |
-| cookieSecurity           |                   boolean                    ¡| undefined                            | Cookie security level. Defaults to true unless running on http.                                                                         |
+| 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                        |
 
+| 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 |
+
 ## Debugging it
 
 Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:

build/index.js

@@ -1,5 +1,14 @@
 /*! For license information please see index.js.LICENSE.txt */
-!(function () {
+!(function (e, t) {
+  "object" == typeof exports && "object" == typeof module
+    ? (module.exports = t())
+    : "function" == typeof define && define.amd
+    ? define([], t)
+    : "object" == typeof exports
+    ? (exports.ReactCookieConsent = t())
+    : (e.ReactCookieConsent = t());
+})("undefined" != typeof self ? self : this, function () {
+  return (function () {
     var e = {
         808: function (e, t, n) {
           var o, r, i;
@@ -171,7 +180,8 @@
           Object.defineProperty(e, "__esModule", { value: !0 });
       });
     var o = {};
-  !(function () {
+    return (
+      (function () {
         "use strict";
         n.r(o),
           n.d(o, {
@@ -308,19 +318,19 @@
           g = { STRICT: "strict", LAX: "lax", NONE: "none" },
           S = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
           C = function () {
-        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : w,
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
               t = l().get(e);
             return void 0 === t && (t = l().get(x(e))), t;
           },
           k = function () {
-        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : w;
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j;
             l().remove(e);
           },
           x = function (e) {
             return "".concat(e, "-legacy");
           },
-      w = "CookieConsent",
-      j = function (e) {
+          j = "CookieConsent",
+          w = function (e) {
             var t = e.condition,
               n = e.wrapper,
               o = e.children;
@@ -347,7 +357,10 @@
                   if ("function" == typeof Proxy) return !0;
                   try {
                     return (
-                  Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})), !0
+                      Boolean.prototype.valueOf.call(
+                        Reflect.construct(Boolean, [], function () {})
+                      ),
+                      !0
                     );
                   } catch (e) {
                     return !1;
@@ -524,7 +537,7 @@
                       C = n.disableButtonStyles,
                       k = n.enableDeclineButton,
                       x = n.flipButtons,
-                  w = n.ButtonComponent,
+                      j = n.ButtonComponent,
                       T = n.overlay,
                       B = n.overlayClasses,
                       E = n.overlayStyle,
@@ -533,18 +546,18 @@
                       I = {},
                       _ = {},
                       N = {},
-                  A = {},
-                  L = {};
+                      R = {},
+                      A = {};
                     switch (
                       (a
                         ? ((I = u({}, r)),
                           (_ = u({}, i)),
                           (N = u({}, c)),
-                      (A = u({}, l)),
-                      (L = u({}, E)))
+                          (R = u({}, l)),
+                          (A = u({}, E)))
                         : ((I = u({}, f(f({}, this.state.style), r))),
-                      (A = u({}, f(f({}, this.state.contentStyle), l))),
-                      (L = u({}, f(f({}, this.state.overlayStyle), E))),
+                          (R = u({}, f(f({}, this.state.contentStyle), l))),
+                          (A = u({}, f(f({}, this.state.overlayStyle), E))),
                           C
                             ? ((_ = u({}, i)), (N = u({}, c)))
                             : ((_ = u({}, f(f({}, this.state.buttonStyle), i))),
@@ -557,12 +570,12 @@
                       case m.BOTTOM:
                         I.bottom = "0";
                     }
-                var R = [];
+                    var L = [];
                     return (
                       k &&
-                    R.push(
+                        L.push(
                           t().createElement(
-                        w,
+                            j,
                             {
                               key: "declineButton",
                               style: N,
@@ -576,9 +589,9 @@
                             p
                           )
                         ),
-                  R.push(
+                      L.push(
                         t().createElement(
-                      w,
+                          j,
                           {
                             key: "acceptButton",
                             style: _,
@@ -592,23 +605,23 @@
                           s
                         )
                       ),
-                  x && R.reverse(),
+                      x && L.reverse(),
                       t().createElement(
-                    j,
+                        w,
                         {
                           condition: T,
                           wrapper: function (e) {
-                        return t().createElement("div", { style: L, className: B }, e);
+                            return t().createElement("div", { style: A, className: B }, e);
                           },
                         },
                         t().createElement(
                           "div",
                           { className: "".concat(d), style: I },
-                      t().createElement("div", { style: A, className: b }, this.props.children),
+                          t().createElement("div", { style: R, className: b }, this.props.children),
                           t().createElement(
                             "div",
                             { className: "".concat(v) },
-                        R.map(function (e) {
+                            L.map(function (e) {
                               return e;
                             })
                           )
@@ -684,7 +697,7 @@
             visible: S.BY_COOKIE_VALUE,
             onAccept: function () {},
             onDecline: function () {},
-        cookieName: w,
+            cookieName: j,
             cookieValue: !0,
             declineCookieValue: !1,
             setDeclineCookie: !0,
@@ -739,5 +752,7 @@
           });
         const B = T;
       })(),
-    (module.exports = o);
-})();
+      o
+    );
+  })();
+});

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-cookie-consent",
-  "version": "6.4.1",
+  "version": "7.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "6.4.1",
+      "version": "7.0.1",
       "license": "MIT",
       "dependencies": {
         "js-cookie": "^2.2.1",

package.json

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

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

src/index.js

@@ -15,10 +15,10 @@ export const SAME_SITE_OPTIONS = {
 };
 
 export const VISIBLE_OPTIONS = {
-  HIDDEN: 'hidden',
-  SHOW: 'show',
-  BY_COOKIE_VALUE: 'byCookieValue'
-}
+  HIDDEN: "hidden",
+  SHOW: "show",
+  BY_COOKIE_VALUE: "byCookieValue",
+};
 
 /**
  * Returns the value of the consent cookie
@@ -279,6 +279,8 @@ class CookieConsent extends Component {
       overlayStyle,
       ariaAcceptLabel,
       ariaDeclineLabel,
+      customContainerAttributes,
+      customContentAttributes,
     } = this.props;
 
     let myStyle = {};
@@ -372,8 +374,8 @@ class CookieConsent extends Component {
           </div>
         )}
       >
-        <div className={`${containerClasses}`} style={myStyle}>
-          <div style={myContentStyle} className={contentClasses}>
+        <div className={`${containerClasses}`} style={myStyle} {...customContainerAttributes}>
+          <div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
             {this.props.children}
           </div>
           <div className={`${buttonWrapperClasses}`}>
@@ -429,6 +431,8 @@ CookieConsent.propTypes = {
   ariaDeclineLabel: PropTypes.string,
   acceptOnScroll: PropTypes.bool,
   acceptOnScrollPercentage: PropTypes.number,
+  customContentAttributes: PropTypes.object,
+  customContainerAttributes: PropTypes.object,
 };
 
 CookieConsent.defaultProps = {
@@ -466,6 +470,8 @@ CookieConsent.defaultProps = {
   ariaDeclineLabel: "Decline cookies",
   acceptOnScroll: false,
   acceptOnScrollPercentage: 25,
+  customContentAttributes: {},
+  customContainerAttributes: {},
 };
 
 export default CookieConsent;

webpack.config.js

@@ -6,17 +6,21 @@ module.exports = {
   output: {
     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.
+    library: {
+      name: "ReactCookieConsent",
+      type: "umd",
+    },
     environment: {
       arrowFunction: false, // the generated runtime-code should not use arrow functions
     },
+    globalObject: `typeof self !== 'undefined' ? self : this`,
   },
   module: {
     rules: [
       {
         test: /\.js$/,
         include: path.resolve(__dirname, "src"),
-        exclude: /(node_modules|bower_components|build)/,
+        exclude: /(node_modules|build)/,
         use: {
           loader: "babel-loader",
           options: {