added customButtonProps (#147)

Co-authored-by: Souchet Céline <4921914+csouchet@users.noreply.github.com>

.prettierignore

@@ -0,0 +1 @@
+build/*

CHANGELOG.md

@@ -5,6 +5,36 @@ 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).
 
+## [next]
+
+- added `customButtonProps` that allows to use custom props with the button component. Specifically useful for library buttons components, for e.g. MUI Button.
+
+## [[7.2.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.1)
+
+- hideOnDecline added to typescript files
+- Added .prettieringore
+
+## [[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
+
+## [[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

@@ -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,6 +179,11 @@ 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                                                                         |
+| 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                                                         |
+| customButtonProps         |                   object                    | `{}`                                 | Allows you to set custom props on the button component                                                                                  |
 
 ## Debugging it
 

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;
@@ -12,6 +13,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
+  hideOnDecline?: boolean;
   onAccept?: (acceptedByScrolling?: boolean) => void;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
@@ -37,10 +39,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;
 }
 
 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
@@ -53,4 +59,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 };

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "react-cookie-consent",
-  "version": "6.4.0",
+  "version": "7.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "6.4.0",
+      "version": "7.2.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.0",
+  "version": "7.2.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

@@ -13,6 +13,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
+  hideOnDecline?: boolean;
   onAccept?: (acceptedByScrolling?: boolean) => void;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
@@ -38,10 +39,15 @@ 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;
+  customButtonProps?: 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
@@ -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
    */
@@ -279,6 +290,9 @@ class CookieConsent extends Component {
       overlayStyle,
       ariaAcceptLabel,
       ariaDeclineLabel,
+      customContainerAttributes,
+      customContentAttributes,
+      customButtonProps,
     } = this.props;
 
     let myStyle = {};
@@ -346,6 +360,7 @@ class CookieConsent extends Component {
     // add accept button
     buttonsToRender.push(
       <ButtonComponent
+        {...customButtonProps}
         key="acceptButton"
         style={myButtonStyle}
         className={buttonClasses}
@@ -367,13 +382,19 @@ class CookieConsent extends Component {
       <ConditionalWrapper
         condition={overlay}
         wrapper={(children) => (
-          <div style={myOverlayStyle} className={overlayClasses}>
+          <div
+            style={myOverlayStyle}
+            className={overlayClasses}
+            onClick={() => {
+              this.overlayClick();
+            }}
+          >
             {children}
           </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}`}>
@@ -425,10 +446,15 @@ 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,
   acceptOnScrollPercentage: PropTypes.number,
+  customContentAttributes: PropTypes.object,
+  customContainerAttributes: PropTypes.object,
+  customButtonProps: PropTypes.object,
 };
 
 CookieConsent.defaultProps = {
@@ -462,10 +488,15 @@ CookieConsent.defaultProps = {
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
   overlay: false,
   overlayClasses: "",
+  onOverlayClick: () => {},
+  acceptOnOverlayClick: false,
   ariaAcceptLabel: "Accept cookies",
   ariaDeclineLabel: "Decline cookies",
   acceptOnScroll: false,
   acceptOnScrollPercentage: 25,
+  customContentAttributes: {},
+  customContainerAttributes: {},
+  customButtonProps: {},
 };
 
 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: {