From eaaf6f87974bcb29777062852f7d6edd61cfd136 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Sun, 19 Dec 2021 13:30:42 +0100 Subject: [PATCH] Added custom attribute props for content and container --- CHANGELOG.md | 4 ++++ README.md | 16 ++++++++++------ src/index.d.ts | 2 ++ src/index.js | 18 ++++++++++++------ 4 files changed, 28 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1b0f82..b78c569 100644 --- a/CHANGELOG.md +++ b/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..) diff --git a/README.md b/README.md index a7a9d62..6a12508 100644 --- a/README.md +++ b/README.md @@ -137,10 +137,10 @@ That option would be interesting if you want to allow user to change their conse ## Props -| Prop | Type | Default value | Description | +| 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. | +| 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 | | disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) | | hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | @@ -150,8 +150,8 @@ That option would be interesting if you want to allow user to change their conse | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | -| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. | -| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | +| onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. | +| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | | expires | number | 365 | Number of days before the cookie expires. | | extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | @@ -173,13 +173,17 @@ That option would be interesting if you want to allow user to change their conse | enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | 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. | +| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | +| 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) | | 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: diff --git a/src/index.d.ts b/src/index.d.ts index 5785714..27d571b 100644 --- a/src/index.d.ts +++ b/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 {} diff --git a/src/index.js b/src/index.js index e13543e..0fa1125 100644 --- a/src/index.js +++ b/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 { )} > -
-
+
+
{this.props.children}
@@ -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;