Added custom attribute props for content and container

CHANGELOG.md

@@ -5,6 +5,10 @@ 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..)

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:

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;