mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02:00
Code Issues Projects Releases Wiki Activity

Added custom attribute props for content and container

Browse Source
This commit is contained in:
Rick van Lieshout 2021-12-19 13:30:42 +01:00
parent 8c86599f24
commit eaaf6f8797
4 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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/), 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). 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)] ## [[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..) - Configured webpack to remove self from build artefact. Should now work in Nextjs and Gatsby (only tested those..)

16
README.md
View File

@ -137,10 +137,10 @@ That option would be interesting if you want to allow user to change their conse
## Props ## 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. | | 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 | | 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) | | 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) | | 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. | | 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. | | 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" | | 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. | | 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. | | 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. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| expires | number | 365 | Number of days before the cookie expires. | | expires | number | 365 | Number of days before the cookie expires. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | 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 | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. | | ButtonComponent | React component | button | React Component to render as a button. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | 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 | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline 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) | | 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 | | 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 ## 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: Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:

2
src/index.d.ts vendored
View File

@ -42,6 +42,8 @@ export interface CookieConsentProps {
ariaDeclineLabel?: string; ariaDeclineLabel?: string;
acceptOnScroll?: boolean; acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number; acceptOnScrollPercentage?: number;
customContentAttributes: object;
customContainerAttributes: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

18
src/index.js
View File

@ -15,10 +15,10 @@ export const SAME_SITE_OPTIONS = {
}; };
export const VISIBLE_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 * Returns the value of the consent cookie
@ -279,6 +279,8 @@ class CookieConsent extends Component {
overlayStyle, overlayStyle,
ariaAcceptLabel, ariaAcceptLabel,
ariaDeclineLabel, ariaDeclineLabel,
customContainerAttributes,
customContentAttributes,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@ -372,8 +374,8 @@ class CookieConsent extends Component {
</div> </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} {this.props.children}
</div> </div>
<div className={`${buttonWrapperClasses}`}> <div className={`${buttonWrapperClasses}`}>
@ -429,6 +431,8 @@ CookieConsent.propTypes = {
ariaDeclineLabel: PropTypes.string, ariaDeclineLabel: PropTypes.string,
acceptOnScroll: PropTypes.bool, acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number, acceptOnScrollPercentage: PropTypes.number,
customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@ -466,6 +470,8 @@ CookieConsent.defaultProps = {
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: false, acceptOnScroll: false,
acceptOnScrollPercentage: 25, acceptOnScrollPercentage: 25,
customContentAttributes: {},
customContainerAttributes: {},
}; };
export default CookieConsent; export default CookieConsent;