mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-08-23 09:35:04 +02:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: mastermindzh:7.4.0
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1
...
compare: mastermindzh:7.6.0
Branches Tags
mastermindzh:master mastermindzh:gh-pages
mastermindzh:9.0.0 mastermindzh:8.0.1 mastermindzh:v8.0.1 mastermindzh:v8.0.0 mastermindzh:7.6.0 mastermindzh:7.5.0 mastermindzh:7.4.1 mastermindzh:7.4.0 mastermindzh:7.3.1 mastermindzh:7.3.0 mastermindzh:7.2.1 mastermindzh:7.2.0 mastermindzh:7.1.1 mastermindzh:7.1.0 mastermindzh:7.0.1 mastermindzh:7.0.0 mastermindzh:6.4.1 mastermindzh:6.4.0 mastermindzh:6.3.0 mastermindzh:6.2.4 mastermindzh:6.2.3 mastermindzh:6.2.2 mastermindzh:6.2.1 mastermindzh:6.2.0 mastermindzh:6.1.0 mastermindzh:6.0.0 mastermindzh:5.2.0 mastermindzh:5.1.4 mastermindzh:5.1.3 mastermindzh:5.1.1

8 Commits
7.4.0 ... 7.6.0

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
9 changed files with 1626 additions and 4422 deletions
Expand all files Collapse all files

17
CHANGELOG.md
View File

@@ -5,6 +5,23 @@ 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.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) ## [[7.3.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.3.1)
- Added type annotations on public functions - Added type annotations on public functions

96
README.md
View File

@@ -137,53 +137,55 @@ 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) |
| buttonText | string or React component | "I understand" | Text to appear on the button | | buttonText | string or React component | "I understand" | Text to appear on the button |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| 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 |
| overlay | boolean | false | Whether to show a page obscuring overlay or not. | | overlay | boolean | false | Whether to show a page obscuring overlay or not. |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the button | | buttonClasses | string | "" | CSS classes to apply to the button |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | customButtonWrapperAttributes | `React.HTMLAttributes<HTMLDivElement>` | `{}` | Allows you to set custom (data) attributes on the button wrapper div |
| buttonId | string | "" | Id to apply to the button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| declineButtonId | string | "" | Id to apply to the decline button | | buttonId | string | "" | Id to apply to the button |
| contentClasses | string | "" | CSS classes to apply to the content | | declineButtonId | string | "" | Id to apply to the decline button |
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | contentClasses | string | "" | CSS classes to apply to the content |
| style | object | [look at source][style] | React styling object for the bar. | | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | style | object | [look at source][style] | React styling object for the bar. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| ButtonComponent | React component | button | React Component to render as a button. | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | ButtonComponent | React component | button | React Component to render as a button. |
| cookieSecurity | boolean ¡ | undefined | Cookie security level. Defaults to true unless running on http. | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button | | cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) | | ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled | | acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |
| customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div | | acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled |
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div | | customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div |
| onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay | | customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
| acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay | | onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
| customButtonProps | object | `{}` | Allows you to set custom props on the button component | | 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 ## Debugging it

1
build/index.d.ts vendored
View File

@@ -48,6 +48,7 @@ export interface CookieConsentProps {
customContentAttributes?: object; customContentAttributes?: object;
customContainerAttributes?: object; customContainerAttributes?: object;
customButtonProps?: object; customButtonProps?: object;
customDeclineButtonProps?: object;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

2
build/index.js
View File

File diff suppressed because one or more lines are too long

2
example

Submodule example updated: bff8dd76c5...8f1152c04d

5891
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -4,7 +4,7 @@
"name": "Rick van Lieshout", "name": "Rick van Lieshout",
"email": "info@rickvanlieshout.com" "email": "info@rickvanlieshout.com"
}, },
"version": "7.3.1", "version": "7.5.0",
"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",
@@ -13,7 +13,7 @@
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.13.1 || ^17.0.0" "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
}, },
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
@@ -43,22 +43,22 @@
}, },
"homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme", "homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.12.1", "@babel/cli": "^7.17.6",
"@babel/core": "^7.12.3", "@babel/core": "^7.17.8",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1", "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/plugin-transform-object-assign": "^7.12.1", "@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/plugin-transform-react-jsx": "^7.12.1", "@babel/plugin-transform-react-jsx": "^7.17.3",
"@babel/preset-env": "^7.12.1", "@babel/preset-env": "^7.16.11",
"@mastermindzh/prettier-config": "^1.0.0", "@mastermindzh/prettier-config": "^1.0.0",
"@types/js-cookie": "^2.2.6", "@types/js-cookie": "^2.2.6",
"babel-loader": "^8.1.0", "babel-loader": "^8.2.4",
"copy-webpack-plugin": "^6.2.1", "copy-webpack-plugin": "^6.2.1",
"husky": "^4.3.0", "husky": "^4.3.0",
"lint-staged": "^10.5.1", "lint-staged": "^10.5.1",
"prettier": "^2.1.2", "prettier": "^2.6.2",
"react": "^16.13.1", "react": "^18.0.0",
"webpack": "^5.3.2", "webpack": "^5.71.0",
"webpack-cli": "^4.1.0" "webpack-cli": "^4.9.2"
}, },
"prettier": "@mastermindzh/prettier-config", "prettier": "@mastermindzh/prettier-config",
"husky": { "husky": {

2
src/index.d.ts vendored
View File

@@ -48,6 +48,8 @@ export interface CookieConsentProps {
customContentAttributes?: object; customContentAttributes?: object;
customContainerAttributes?: object; customContainerAttributes?: object;
customButtonProps?: object; customButtonProps?: object;
customDeclineButtonProps?: object;
customButtonWrapperAttributes?: React.HTMLAttributes<HTMLDivElement>;
} }
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {} export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

11
src/index.js
View File

@@ -293,6 +293,8 @@ class CookieConsent extends Component {
customContainerAttributes, customContainerAttributes,
customContentAttributes, customContentAttributes,
customButtonProps, customButtonProps,
customDeclineButtonProps,
customButtonWrapperAttributes,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@@ -352,6 +354,7 @@ class CookieConsent extends Component {
onClick={() => { onClick={() => {
this.decline(); this.decline();
}} }}
{...customDeclineButtonProps}
> >
{declineButtonText} {declineButtonText}
</ButtonComponent> </ButtonComponent>
@@ -360,7 +363,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}
@@ -369,6 +371,7 @@ class CookieConsent extends Component {
onClick={() => { onClick={() => {
this.accept(); this.accept();
}} }}
{...customButtonProps}
> >
{buttonText} {buttonText}
</ButtonComponent> </ButtonComponent>
@@ -397,7 +400,7 @@ class CookieConsent extends Component {
<div style={myContentStyle} className={contentClasses} {...customContentAttributes}> <div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
{this.props.children} {this.props.children}
</div> </div>
<div className={`${buttonWrapperClasses}`}> <div className={`${buttonWrapperClasses}`} {...customButtonWrapperAttributes}>
{buttonsToRender.map((button) => { {buttonsToRender.map((button) => {
return button; return button;
})} })}
@@ -455,6 +458,8 @@ CookieConsent.propTypes = {
customContentAttributes: PropTypes.object, customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object, customContainerAttributes: PropTypes.object,
customButtonProps: PropTypes.object, customButtonProps: PropTypes.object,
customDeclineButtonProps: PropTypes.object,
customButtonWrapperAttributes: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@@ -497,6 +502,8 @@ CookieConsent.defaultProps = {
customContentAttributes: {}, customContentAttributes: {},
customContainerAttributes: {}, customContainerAttributes: {},
customButtonProps: {}, customButtonProps: {},
customDeclineButtonProps: {},
customButtonWrapperAttributes: {},
}; };
export default CookieConsent; export default CookieConsent;