Added custom attribute props for content and container

CHANGELOG.md

@@ -5,7 +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.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1)]
+## [[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
 

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.js

@@ -7,7 +7,7 @@
     : "object" == typeof exports
     ? (exports.ReactCookieConsent = t())
     : (e.ReactCookieConsent = t());
-})(self, function () {
+})("undefined" != typeof self ? self : this, function () {
   return (function () {
     var e = {
         808: function (e, t, n) {

package-lock.json

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

@@ -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',
+  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

@@ -13,6 +13,7 @@ module.exports = {
     environment: {
       arrowFunction: false, // the generated runtime-code should not use arrow functions
     },
+    globalObject: `typeof self !== 'undefined' ? self : this`,
   },
   module: {
     rules: [