changelog version update

added customButtonWrapperAttributes prop (#167 )
* added customButtonWrapperAttributes prop * escape characters in README
2025-08-23 09:35:04 +02:00 · 2022-07-26 14:46:34 +02:00 · 2022-07-26 14:43:44 +02:00 · 2022-07-20 09:09:28 +02:00 · 2022-06-18 14:30:02 +02:00 · 2022-06-18 14:29:39 +02:00
9 changed files with 1643 additions and 4435 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,27 @@ 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.6.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0]
+
+- Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div
+
+## [[7.5.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.5.0)
+
+- Added `customDeclineButtonProps` to add custom properties to the decline button
+
+## [[7.4.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.1)
+
+- Small version error in package.json that actually didn't make it work with React 18
+
+## [[7.4.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.0)
+
+- Added support for React 18
+- Updated example and codebase to use React 18
+
+## [[7.3.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.3.1)
+
+- Added type annotations on public functions
+
 ## [[7.3.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.3.0)

 - added `customButtonProps` that allows to use custom props with the button component. Specifically useful for library buttons components, for e.g. MUI Button.
--- a/README.md
+++ b/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                                                                                                        |
@@ -159,6 +159,7 @@ That option would be interesting if you want to allow user to change their conse
 | containerClasses              |                   string                    | ""                                   | CSS classes to apply to the surrounding container                                                                                       |
 | buttonClasses                 |                   string                    | ""                                   | CSS classes to apply to the button                                                                                                      |
 | buttonWrapperClasses          |                   string                    | ""                                   | CSS classes to apply to the div wrapping the buttons                                                                                    |
+| customButtonWrapperAttributes |   `React.HTMLAttributes<HTMLDivElement>`    | `{}`                                 | Allows you to set custom (data) attributes on the button wrapper div                                                                    |
 | declineButtonClasses          |                   string                    | ""                                   | CSS classes to apply to the decline button                                                                                              |
 | buttonId                      |                   string                    | ""                                   | Id to apply to the button                                                                                                               |
 | declineButtonId               |                   string                    | ""                                   | Id to apply to the decline button                                                                                                       |
@@ -174,7 +175,7 @@ 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)                       |
@@ -184,6 +185,7 @@ That option would be interesting if you want to allow user to change their conse
 | 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                                                                                  |
+| customDeclineButtonProps      |                   object                    | `{}`                                 | Allows you to set custom props on the decline button component                                                                          |

 ## Debugging it

--- a/build/index.d.ts
+++ b/build/index.d.ts
@@ -48,6 +48,7 @@ export interface CookieConsentProps {
  customContentAttributes?: object;
  customContainerAttributes?: object;
  customButtonProps?: object;
+  customDeclineButtonProps?: object;
 }

 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
@@ -65,12 +66,12 @@ export function getCookieConsentValue(name?: string): string;
 * 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);
+export function resetCookieConsentValue(name?: string): void;

 /**
 * Get the legacy cookie name by the regular cookie name
 * @param {string} name of cookie to get
 */
-export function getLegacyCookieName(name: string);
+export function getLegacyCookieName(name: string): string;

 export { Cookies };
--- a/build/index.js
+++ b/build/index.js
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
    "name": "Rick van Lieshout",
    "email": "info@rickvanlieshout.com"
  },
-  "version": "7.3.0",
+  "version": "7.5.0",
  "description": "A small, simple and customizable cookie consent bar for use in React applications.",
  "main": "build/index.js",
  "types": "build/index.d.ts",
@@ -13,7 +13,7 @@
    "prop-types": "^15.7.2"
  },
  "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
  },
  "scripts": {
    "build": "webpack",
@@ -43,22 +43,22 @@
  },
  "homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
  "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-object-assign": "^7.12.1",
-    "@babel/plugin-transform-react-jsx": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-transform-object-assign": "^7.16.7",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@babel/preset-env": "^7.16.11",
    "@mastermindzh/prettier-config": "^1.0.0",
    "@types/js-cookie": "^2.2.6",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.4",
    "copy-webpack-plugin": "^6.2.1",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
-    "prettier": "^2.1.2",
-    "react": "^16.13.1",
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.1.0"
+    "prettier": "^2.6.2",
+    "react": "^18.0.0",
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2"
  },
  "prettier": "@mastermindzh/prettier-config",
  "husky": {
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -48,6 +48,8 @@ export interface CookieConsentProps {
  customContentAttributes?: object;
  customContainerAttributes?: object;
  customButtonProps?: object;
+  customDeclineButtonProps?: object;
+  customButtonWrapperAttributes?: React.HTMLAttributes<HTMLDivElement>;
 }

 export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
--- a/src/index.js
+++ b/src/index.js
@@ -27,11 +27,11 @@ export const VISIBLE_OPTIONS = {
 * @param {*} name optional name of the cookie
 */
 export const getCookieConsentValue = (name = defaultCookieConsentName) => {
-  let cookieValue = Cookies.get(name);
+  const cookieValue = Cookies.get(name);

  // if the cookieValue is undefined check for the legacy cookie
  if (cookieValue === undefined) {
-    cookieValue = Cookies.get(getLegacyCookieName(name));
+    return Cookies.get(getLegacyCookieName(name));
  }
  return cookieValue;
 };
@@ -201,7 +201,7 @@ class CookieConsent extends Component {
      cookieSecurity = location ? location.protocol === "https:" : true;
    }

-    let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };
+    const cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };

    // Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
    if (sameSite === SAME_SITE_OPTIONS.NONE) {
@@ -229,12 +229,12 @@ class CookieConsent extends Component {
    const { acceptOnScrollPercentage } = this.props;

    // (top / height) - height * 100
-    let rootNode = document.documentElement,
+    const rootNode = document.documentElement,
      body = document.body,
      top = "scrollTop",
      height = "scrollHeight";

-    let percentage =
+    const percentage =
      ((rootNode[top] || body[top]) /
        ((rootNode[height] || body[height]) - rootNode.clientHeight)) *
      100;
@@ -293,6 +293,8 @@ class CookieConsent extends Component {
      customContainerAttributes,
      customContentAttributes,
      customButtonProps,
+      customDeclineButtonProps,
+      customButtonWrapperAttributes,
    } = this.props;

    let myStyle = {};
@@ -352,6 +354,7 @@ class CookieConsent extends Component {
          onClick={() => {
            this.decline();
          }}
+          {...customDeclineButtonProps}
        >
          {declineButtonText}
        </ButtonComponent>
@@ -360,7 +363,6 @@ class CookieConsent extends Component {
    // add accept button
    buttonsToRender.push(
      <ButtonComponent
-        {...customButtonProps}
        key="acceptButton"
        style={myButtonStyle}
        className={buttonClasses}
@@ -369,6 +371,7 @@ class CookieConsent extends Component {
        onClick={() => {
          this.accept();
        }}
+        {...customButtonProps}
      >
        {buttonText}
      </ButtonComponent>
@@ -397,7 +400,7 @@ class CookieConsent extends Component {
          <div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
            {this.props.children}
          </div>
-          <div className={`${buttonWrapperClasses}`}>
+          <div className={`${buttonWrapperClasses}`} {...customButtonWrapperAttributes}>
            {buttonsToRender.map((button) => {
              return button;
            })}
@@ -455,6 +458,8 @@ CookieConsent.propTypes = {
  customContentAttributes: PropTypes.object,
  customContainerAttributes: PropTypes.object,
  customButtonProps: PropTypes.object,
+  customDeclineButtonProps: PropTypes.object,
+  customButtonWrapperAttributes: PropTypes.object,
 };

 CookieConsent.defaultProps = {
@@ -497,6 +502,8 @@ CookieConsent.defaultProps = {
  customContentAttributes: {},
  customContainerAttributes: {},
  customButtonProps: {},
+  customDeclineButtonProps: {},
+  customButtonWrapperAttributes: {},
 };

 export default CookieConsent;
Author	SHA1	Message	Date
Mastermindzh	d7fce12ea4	changelog version update	2022-07-26 14:46:34 +02:00
Oskar Filipowicz	d05509bf04	added customButtonWrapperAttributes prop (#167 ) * added customButtonWrapperAttributes prop * escape characters in README	2022-07-26 14:43:44 +02:00
dependabot[bot]	a7ce2de923	Bump terser from 5.7.1 to 5.14.2 (#163 ) Bumps [terser](https://github.com/terser/terser) from 5.7.1 to 5.14.2. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-07-20 09:09:28 +02:00
Mastermindzh	d8993bead2	release 7.5.0	2022-06-18 14:30:02 +02:00
Mastermindzh	ecb5f30a7c	Added to add custom properties to the decline button	2022-06-18 14:29:39 +02:00
dependabot[bot]	d1c7252546	Bump semver-regex from 3.1.3 to 3.1.4 (#158 ) Bumps [semver-regex](https://github.com/sindresorhus/semver-regex) from 3.1.3 to 3.1.4. - [Release notes](https://github.com/sindresorhus/semver-regex/releases) - [Commits](https://github.com/sindresorhus/semver-regex/commits/v3.1.4) --- updated-dependencies: - dependency-name: semver-regex dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-06-06 09:25:54 +02:00
Mastermindzh	602a9bfe62	release 7.4.1	2022-04-03 10:30:45 +02:00
Mastermindzh	c9a6e1f0ce	release 7.4.0	2022-04-03 10:25:55 +02:00
dependabot[bot]	fefe28e288	Bump minimist from 1.2.5 to 1.2.6 (#155 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-03-28 11:17:52 +02:00
Abe Tomoaki	d63cb81fb7	refactor: use `const` instead of `let`. (#153 )	2022-02-11 09:24:48 +01:00
Mastermindzh	e96b4fe4c0	release 7.3.1	2022-02-10 14:25:18 +01:00