1 Commits
7.3.0 ... 7.0.0

Author SHA1 Message Date
Peter Krieg
d6c751860c Switch Library Type from CommonJs2 => UMD (#134) 2021-12-08 17:32:57 +01:00
10 changed files with 794 additions and 132 deletions

View File

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

View File

@@ -5,36 +5,6 @@ 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).
## [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))] ## [[6.4.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.4.1))]
- Added missing typing - Added missing typing

View File

@@ -138,7 +138,7 @@ 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 |
@@ -174,16 +174,11 @@ 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 | | 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 |
| 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 ## Debugging it

5
build/index.d.ts vendored
View File

@@ -13,7 +13,6 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
hideOnDecline?: boolean;
onAccept?: (acceptedByScrolling?: boolean) => void; onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
@@ -39,14 +38,10 @@ export interface CookieConsentProps {
overlay?: boolean; overlay?: boolean;
overlayClasses?: string; overlayClasses?: string;
overlayStyle?: object; overlayStyle?: object;
onOverlayClick?: () => void;
acceptOnOverlayClick?: boolean;
ariaAcceptLabel?: string; ariaAcceptLabel?: string;
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, {}> {}

File diff suppressed because one or more lines are too long

4
package-lock.json generated
View File

@@ -1,11 +1,11 @@
{ {
"name": "react-cookie-consent", "name": "react-cookie-consent",
"version": "7.2.1", "version": "6.4.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "7.2.1", "version": "6.4.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",

View File

@@ -4,7 +4,7 @@
"name": "Rick van Lieshout", "name": "Rick van Lieshout",
"email": "info@rickvanlieshout.com" "email": "info@rickvanlieshout.com"
}, },
"version": "7.2.1", "version": "6.4.1",
"description": "A small, simple and customizable cookie consent bar for use in React applications.", "description": "A small, simple and customizable cookie consent bar for use in React applications.",
"main": "build/index.js", "main": "build/index.js",
"types": "build/index.d.ts", "types": "build/index.d.ts",

6
src/index.d.ts vendored
View File

@@ -13,7 +13,6 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
hideOnDecline?: boolean;
onAccept?: (acceptedByScrolling?: boolean) => void; onAccept?: (acceptedByScrolling?: boolean) => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
@@ -39,15 +38,10 @@ export interface CookieConsentProps {
overlay?: boolean; overlay?: boolean;
overlayClasses?: string; overlayClasses?: string;
overlayStyle?: object; overlayStyle?: object;
onOverlayClick?: () => void;
acceptOnOverlayClick?: boolean;
ariaAcceptLabel?: string; ariaAcceptLabel?: string;
ariaDeclineLabel?: string; ariaDeclineLabel?: string;
acceptOnScroll?: boolean; acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number; acceptOnScrollPercentage?: number;
customContentAttributes?: object;
customContainerAttributes?: object;
customButtonProps?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

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
@@ -159,17 +159,6 @@ 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 * Set a persistent decline cookie
*/ */
@@ -290,9 +279,6 @@ class CookieConsent extends Component {
overlayStyle, overlayStyle,
ariaAcceptLabel, ariaAcceptLabel,
ariaDeclineLabel, ariaDeclineLabel,
customContainerAttributes,
customContentAttributes,
customButtonProps,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@@ -360,7 +346,6 @@ class CookieConsent extends Component {
// add accept button // add accept button
buttonsToRender.push( buttonsToRender.push(
<ButtonComponent <ButtonComponent
{...customButtonProps}
key="acceptButton" key="acceptButton"
style={myButtonStyle} style={myButtonStyle}
className={buttonClasses} className={buttonClasses}
@@ -382,19 +367,13 @@ class CookieConsent extends Component {
<ConditionalWrapper <ConditionalWrapper
condition={overlay} condition={overlay}
wrapper={(children) => ( wrapper={(children) => (
<div <div style={myOverlayStyle} className={overlayClasses}>
style={myOverlayStyle}
className={overlayClasses}
onClick={() => {
this.overlayClick();
}}
>
{children} {children}
</div> </div>
)} )}
> >
<div className={`${containerClasses}`} style={myStyle} {...customContainerAttributes}> <div className={`${containerClasses}`} style={myStyle}>
<div style={myContentStyle} className={contentClasses} {...customContentAttributes}> <div style={myContentStyle} className={contentClasses}>
{this.props.children} {this.props.children}
</div> </div>
<div className={`${buttonWrapperClasses}`}> <div className={`${buttonWrapperClasses}`}>
@@ -446,15 +425,10 @@ CookieConsent.propTypes = {
overlay: PropTypes.bool, overlay: PropTypes.bool,
overlayClasses: PropTypes.string, overlayClasses: PropTypes.string,
overlayStyle: PropTypes.object, overlayStyle: PropTypes.object,
onOverlayClick: PropTypes.func,
acceptOnOverlayClick: PropTypes.bool,
ariaAcceptLabel: PropTypes.string, ariaAcceptLabel: PropTypes.string,
ariaDeclineLabel: PropTypes.string, ariaDeclineLabel: PropTypes.string,
acceptOnScroll: PropTypes.bool, acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number, acceptOnScrollPercentage: PropTypes.number,
customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object,
customButtonProps: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@@ -488,15 +462,10 @@ CookieConsent.defaultProps = {
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>, ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
overlay: false, overlay: false,
overlayClasses: "", overlayClasses: "",
onOverlayClick: () => {},
acceptOnOverlayClick: false,
ariaAcceptLabel: "Accept cookies", ariaAcceptLabel: "Accept cookies",
ariaDeclineLabel: "Decline cookies", ariaDeclineLabel: "Decline cookies",
acceptOnScroll: false, acceptOnScroll: false,
acceptOnScrollPercentage: 25, acceptOnScrollPercentage: 25,
customContentAttributes: {},
customContainerAttributes: {},
customButtonProps: {},
}; };
export default CookieConsent; export default CookieConsent;

View File

@@ -13,7 +13,6 @@ module.exports = {
environment: { environment: {
arrowFunction: false, // the generated runtime-code should not use arrow functions arrowFunction: false, // the generated runtime-code should not use arrow functions
}, },
globalObject: `typeof self !== 'undefined' ? self : this`,
}, },
module: { module: {
rules: [ rules: [