Added custom attribute props for content and container

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

CHANGELOG.md

@@ -5,6 +5,26 @@ 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
+
+## [[6.4.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.0))]
+
+- Added visible prop
+
 ## [[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.

README.md

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

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 export interface CookieConsentProps {
   location?: "top" | "bottom" | "none";
   sameSite?: "strict" | "lax" | "none";
+  visible?: "hidden" | "show" | "byCookieValue";
   cookieSecurity?: boolean;
   style?: object;
   buttonStyle?: object;
@@ -53,4 +54,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
  */
 export function getCookieConsentValue(name?: string): string;
 
+/**
+ * Reset the consent cookie
+ * Remove the cookie on browser in order to allow user to change their consent
+ * @param {*} name optional name of the cookie
+ */
+export function resetCookieConsentValue(name?: string);
+
+/**
+ * Get the legacy cookie name by the regular cookie name
+ * @param {string} name of cookie to get
+ */
+export function getLegacyCookieName(name: string);
+
 export { Cookies };

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, {
@@ -179,16 +189,22 @@
               return l();
             },
             OPTIONS: function () {
-          return O;
+              return m;
             },
             SAME_SITE_OPTIONS: function () {
               return g;
             },
+            VISIBLE_OPTIONS: function () {
+              return S;
+            },
             default: function () {
-          return w;
+              return B;
             },
             getCookieConsentValue: function () {
-          return S;
+              return C;
+            },
+            resetCookieConsentValue: function () {
+              return k;
             },
           });
         const e = require("react");
@@ -278,8 +294,8 @@
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
           return e;
         }
-    function m(e) {
+        function O(e) {
-      return (m = Object.setPrototypeOf
+          return (O = Object.setPrototypeOf
             ? Object.getPrototypeOf
             : function (e) {
                 return e.__proto__ || Object.getPrototypeOf(e);
@@ -298,24 +314,29 @@
             e
           );
         }
-    var O = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
+        var m = { TOP: "top", BOTTOM: "bottom", NONE: "none" },
           g = { STRICT: "strict", LAX: "lax", NONE: "none" },
-      S = function () {
+          S = { HIDDEN: "hidden", SHOW: "show", BY_COOKIE_VALUE: "byCookieValue" },
-        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : k,
+          C = function () {
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j,
               t = l().get(e);
-        return void 0 === t && (t = l().get(C(e))), t;
+            return void 0 === t && (t = l().get(x(e))), t;
           },
-      C = function (e) {
+          k = function () {
+            var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : j;
+            l().remove(e);
+          },
+          x = function (e) {
             return "".concat(e, "-legacy");
           },
-      k = "CookieConsent",
+          j = "CookieConsent",
-      x = function (e) {
+          w = function (e) {
             var t = e.condition,
               n = e.wrapper,
               o = e.children;
             return t ? n(o) : o;
           },
-      j = (function (e) {
+          T = (function (e) {
             !(function (e, t) {
               if ("function" != typeof t && null !== t)
                 throw new TypeError("Super expression must either be null or a function");
@@ -336,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;
@@ -344,9 +368,9 @@
                 })()),
                 function () {
                   var e,
-                t = m(r);
+                    t = O(r);
                   if (i) {
-                var n = m(this).constructor;
+                    var n = O(this).constructor;
                     e = Reflect.construct(t, arguments, n);
                   } else e = t.apply(this, arguments);
                   return y(this, e);
@@ -474,21 +498,26 @@
                       c = this.props.cookieSecurity;
                     void 0 === c && (c = !location || "https:" === location.protocol);
                     var a = f(f({ expires: r }, o), {}, { sameSite: i, secure: c });
-                i === g.NONE && l().set(C(e), t, a), l().set(e, t, a);
+                    i === g.NONE && l().set(x(e), t, a), l().set(e, t, a);
                   },
                 },
                 {
                   key: "getCookieValue",
                   value: function () {
                     var e = this.props.cookieName;
-                return S(e);
+                    return C(e);
                   },
                 },
                 {
                   key: "render",
                   value: function () {
                     var e = this;
+                    switch (this.props.visible) {
+                      case S.HIDDEN:
+                        return null;
+                      case S.BY_COOKIE_VALUE:
                         if (!this.state.visible) return null;
+                    }
                     var n = this.props,
                       o = n.location,
                       r = n.style,
@@ -502,57 +531,57 @@
                       b = n.contentClasses,
                       y = n.buttonClasses,
                       v = n.buttonWrapperClasses,
-                  m = n.declineButtonClasses,
+                      O = n.declineButtonClasses,
                       h = n.buttonId,
                       g = n.declineButtonId,
-                  S = n.disableButtonStyles,
+                      C = n.disableButtonStyles,
-                  C = n.enableDeclineButton,
+                      k = n.enableDeclineButton,
-                  k = n.flipButtons,
+                      x = n.flipButtons,
                       j = n.ButtonComponent,
-                  w = n.overlay,
+                      T = n.overlay,
-                  T = n.overlayClasses,
+                      B = n.overlayClasses,
-                  B = n.overlayStyle,
+                      E = n.overlayStyle,
                       P = n.ariaAcceptLabel,
-                  E = n.ariaDeclineLabel,
+                      D = n.ariaDeclineLabel,
-                  D = {},
                       I = {},
-                  N = {},
                       _ = {},
-                  R = {};
+                      N = {},
+                      R = {},
+                      A = {};
                     switch (
                       (a
-                    ? ((D = u({}, r)),
+                        ? ((I = u({}, r)),
-                      (I = u({}, i)),
+                          (_ = u({}, i)),
                           (N = u({}, c)),
-                      (_ = u({}, l)),
+                          (R = u({}, l)),
-                      (R = u({}, B)))
+                          (A = u({}, E)))
-                    : ((D = u({}, f(f({}, this.state.style), r))),
+                        : ((I = u({}, f(f({}, this.state.style), r))),
-                      (_ = u({}, f(f({}, this.state.contentStyle), l))),
+                          (R = u({}, f(f({}, this.state.contentStyle), l))),
-                      (R = u({}, f(f({}, this.state.overlayStyle), B))),
+                          (A = u({}, f(f({}, this.state.overlayStyle), E))),
-                      S
+                          C
-                        ? ((I = u({}, i)), (N = u({}, c)))
+                            ? ((_ = u({}, i)), (N = u({}, c)))
-                        : ((I = u({}, f(f({}, this.state.buttonStyle), i))),
+                            : ((_ = u({}, f(f({}, this.state.buttonStyle), i))),
                               (N = u({}, f(f({}, this.state.declineButtonStyle), c))))),
                       o)
                     ) {
-                  case O.TOP:
+                      case m.TOP:
-                    D.top = "0";
+                        I.top = "0";
                         break;
-                  case O.BOTTOM:
+                      case m.BOTTOM:
-                    D.bottom = "0";
+                        I.bottom = "0";
                     }
-                var A = [];
+                    var L = [];
                     return (
-                  C &&
+                      k &&
-                    A.push(
+                        L.push(
                           t().createElement(
                             j,
                             {
                               key: "declineButton",
                               style: N,
-                          className: m,
+                              className: O,
                               id: g,
-                          "aria-label": E,
+                              "aria-label": D,
                               onClick: function () {
                                 e.decline();
                               },
@@ -560,12 +589,12 @@
                             p
                           )
                         ),
-                  A.push(
+                      L.push(
                         t().createElement(
                           j,
                           {
                             key: "acceptButton",
-                        style: I,
+                            style: _,
                             className: y,
                             id: h,
                             "aria-label": P,
@@ -576,23 +605,23 @@
                           s
                         )
                       ),
-                  k && A.reverse(),
+                      x && L.reverse(),
                       t().createElement(
-                    x,
+                        w,
                         {
-                      condition: w,
+                          condition: T,
                           wrapper: function (e) {
-                        return t().createElement("div", { style: R, className: T }, e);
+                            return t().createElement("div", { style: A, className: B }, e);
                           },
                         },
                         t().createElement(
                           "div",
-                      { className: "".concat(d), style: D },
+                          { className: "".concat(d), style: I },
-                      t().createElement("div", { style: _, className: b }, this.props.children),
+                          t().createElement("div", { style: R, className: b }, this.props.children),
                           t().createElement(
                             "div",
                             { className: "".concat(v) },
-                        A.map(function (e) {
+                            L.map(function (e) {
                               return e;
                             })
                           )
@@ -605,10 +634,15 @@
               a
             );
           })(e.Component);
-    (j.propTypes = {
+        (T.propTypes = {
           location: i().oneOf(
-        Object.keys(O).map(function (e) {
+            Object.keys(m).map(function (e) {
-          return O[e];
+              return m[e];
+            })
+          ),
+          visible: i().oneOf(
+            Object.keys(S).map(function (e) {
+              return S[e];
             })
           ),
           sameSite: i().oneOf(
@@ -655,14 +689,15 @@
           acceptOnScroll: i().bool,
           acceptOnScrollPercentage: i().number,
         }),
-      (j.defaultProps = {
+          (T.defaultProps = {
             disableStyles: !1,
             hideOnAccept: !0,
             hideOnDecline: !0,
-        location: O.BOTTOM,
+            location: m.BOTTOM,
+            visible: S.BY_COOKIE_VALUE,
             onAccept: function () {},
             onDecline: function () {},
-        cookieName: k,
+            cookieName: j,
             cookieValue: !0,
             declineCookieValue: !1,
             setDeclineCookie: !0,
@@ -715,7 +750,9 @@
             acceptOnScroll: !1,
             acceptOnScrollPercentage: 25,
           });
-    const w = j;
+        const B = T;
       })(),
-    (module.exports = o);
+      o
+    );
   })();
+});

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-cookie-consent",
-  "version": "6.3.0",
+  "version": "7.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "6.3.0",
+      "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.3.0",
+  "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

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 export interface CookieConsentProps {
   location?: "top" | "bottom" | "none";
   sameSite?: "strict" | "lax" | "none";
+  visible?: "hidden" | "show" | "byCookieValue";
   cookieSecurity?: boolean;
   style?: object;
   buttonStyle?: object;
@@ -41,6 +42,8 @@ export interface CookieConsentProps {
   ariaDeclineLabel?: string;
   acceptOnScroll?: boolean;
   acceptOnScrollPercentage?: number;
+  customContentAttributes: object;
+  customContainerAttributes: object;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
@@ -53,4 +56,17 @@ export default class CookieConsent extends React.Component<CookieConsentProps, {
  */
 export function getCookieConsentValue(name?: string): string;
 
+/**
+ * Reset the consent cookie
+ * Remove the cookie on browser in order to allow user to change their consent
+ * @param {*} name optional name of the cookie
+ */
+export function resetCookieConsentValue(name?: string);
+
+/**
+ * Get the legacy cookie name by the regular cookie name
+ * @param {string} name of cookie to get
+ */
+export function getLegacyCookieName(name: string);
+
 export { Cookies };

src/index.js

@@ -15,10 +15,10 @@ export const SAME_SITE_OPTIONS = {
 };
 
 export const VISIBLE_OPTIONS = {
-  HIDDEN: 'hidden',
+  HIDDEN: "hidden",
-  SHOW: 'show',
+  SHOW: "show",
-  BY_COOKIE_VALUE: 'byCookieValue'
+  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 className={`${containerClasses}`} style={myStyle} {...customContainerAttributes}>
-          <div style={myContentStyle} className={contentClasses}>
+          <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: {