mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 09:35:04 +02:00
Compare commits
16 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
814202780b | ||
|
d01995e3b4 | ||
56de263dce | |||
|
0228e7f32c | ||
50216eec3c | |||
3e9e988e96 | |||
1c6f335500 | |||
eb45e7a652 | |||
26306f7490 | |||
7d8f52018d | |||
a494066785 | |||
|
7f15b25e89 | ||
0f4893af4b | |||
|
1ad4474d93 | ||
|
6a5aac9cd7 | ||
c656e311e6 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +1,2 @@
|
||||
node_modules
|
||||
build/index.js.LICENSE.txt
|
||||
|
27
CHANGELOG.md
27
CHANGELOG.md
@@ -5,6 +5,33 @@ 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).
|
||||
|
||||
## [[6.2.3](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.3)]
|
||||
|
||||
- Added support for IE11, the webpack generated runtime-code should not use arrow functions
|
||||
|
||||
## [[6.2.2](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.2)]
|
||||
|
||||
- Fixed the return type of getCookieConsentValue in the dts file.
|
||||
|
||||
## [[6.2.1](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.1)]
|
||||
|
||||
Added the `getCookieConsentValue` to the dts file.
|
||||
|
||||
## [[6.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.2.0)]
|
||||
|
||||
Added the exported function `getCookieConsentValue` to get the cookie value from custom code
|
||||
|
||||
## [[6.1.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.1.0)]
|
||||
|
||||
Added support for React 17
|
||||
|
||||
## [[6.0.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/6.0.0)]
|
||||
|
||||
### removed
|
||||
|
||||
Accepting by scrolling is no longer allowed and has thus been removed from the package.
|
||||
For details see [issue 88](https://github.com/Mastermindzh/react-cookie-consent/issues/88)
|
||||
|
||||
## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
|
||||
|
||||
### added
|
||||
|
28
README.md
28
README.md
@@ -22,16 +22,16 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
|
||||
- [Using it](#using-it)
|
||||
- [Props](#props)
|
||||
- [Debugging it](#debugging-it)
|
||||
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
|
||||
- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
|
||||
- [Styling it](#styling-it)
|
||||
- [Examples](#examples)
|
||||
- [changing the bar background to red](#changing-the-bar-background-to-red)
|
||||
- [changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
|
||||
- [Changing the bar background to red](#changing-the-bar-background-to-red)
|
||||
- [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
|
||||
- [Using predefined CSS classes](#using-predefined-css-classes)
|
||||
- [Flipping the buttons](#flipping-the-buttons)
|
||||
- [Extra cookie options](#extra-cookie-options)
|
||||
- [rainbows!](#rainbows)
|
||||
- [contributor information](#contributor-information)
|
||||
- [Rainbows!](#rainbows)
|
||||
- [Contributor information](#contributor-information)
|
||||
- [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
|
||||
|
||||
<!-- tocstop -->
|
||||
@@ -105,6 +105,16 @@ If the decline button is enabled then the (onDecline) prop function can be used,
|
||||
></CookieConsent>
|
||||
```
|
||||
|
||||
### getting the cookies value in your own code
|
||||
|
||||
react-cookie-consent exports a function called `getCookieConsentValue`. You can use it in your own code like so:
|
||||
|
||||
```js
|
||||
import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
|
||||
|
||||
console.log(getCookieConsentValue());
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default value | Description |
|
||||
@@ -186,13 +196,13 @@ You can use `disableStyles={true}` to disable any built-in styling.
|
||||
|
||||
### Examples
|
||||
|
||||
#### changing the bar background to red
|
||||
#### Changing the bar background to red
|
||||
|
||||
```js
|
||||
<CookieConsent style={{ background: "red" }}></CookieConsent>
|
||||
```
|
||||
|
||||
#### changing the button font-weight to bold
|
||||
#### Changing the button font-weight to bold
|
||||
|
||||
```js
|
||||
<CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>
|
||||
@@ -241,7 +251,7 @@ You can add more cookie options using the extraCookieOptions parameter like so:
|
||||
<CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
|
||||
```
|
||||
|
||||
#### rainbows!
|
||||
#### Rainbows!
|
||||
|
||||

|
||||
|
||||
@@ -287,7 +297,7 @@ You can also generate a page-obfuscating overlay that will prevent actions other
|
||||
[contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55
|
||||
[overlaystyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L62-L69
|
||||
|
||||
## contributor information
|
||||
## Contributor information
|
||||
|
||||
When making a PR please think about the following things:
|
||||
|
||||
|
12
build/index.d.ts
vendored
12
build/index.d.ts
vendored
@@ -12,7 +12,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
|
||||
onAccept?: Function;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
declineButtonText?: Function | React.ReactNode;
|
||||
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
|
||||
declineButtonClasses?: string;
|
||||
buttonId?: string;
|
||||
declineButtonId?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
extraCookieOptions?: object;
|
||||
disableButtonStyles?: boolean;
|
||||
enableDeclineButton?: boolean;
|
||||
@@ -45,4 +43,12 @@ export interface CookieConsentProps {
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
/**
|
||||
* Returns the value of the consent cookie
|
||||
* Retrieves the regular value first and if not found the legacy one according
|
||||
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
* @param {*} name optional name of the cookie
|
||||
*/
|
||||
export function getCookieConsentValue(name?: string): string;
|
||||
|
||||
export { Cookies };
|
||||
|
3023
build/index.js
3023
build/index.js
File diff suppressed because it is too large
Load Diff
14
package-lock.json
generated
14
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-cookie-consent",
|
||||
"version": "5.2.0",
|
||||
"version": "6.2.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -4204,9 +4204,9 @@
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true
|
||||
},
|
||||
"log-symbols": {
|
||||
@@ -5655,9 +5655,9 @@
|
||||
}
|
||||
},
|
||||
"ssri": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
|
||||
"integrity": "sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==",
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
|
||||
"integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minipass": "^3.1.1"
|
||||
|
@@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "5.2.0",
|
||||
"version": "6.2.3",
|
||||
"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"
|
||||
"react": "^16.13.1 || ^17.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
@@ -21,7 +21,8 @@
|
||||
"patch": "npm --no-git-tag-version version patch",
|
||||
"minor": "npm --no-git-tag-version version minor",
|
||||
"major": "npm --no-git-tag-version version major",
|
||||
"release": "npm run build && git add -A && PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag $PACKAGE_VERSION && git commit -m 'release $PACKAGE_VERSION' && git push && git push --tags && npm publish",
|
||||
"preversion": "grep \"\\[$npm_package_version\\]\" CHANGELOG.md > /dev/null || ( echo 'You need to add an entry in CHANGELOG.md for this version.' && false )",
|
||||
"release": "npm run build && git add -A && git tag $npm_package_version && git commit -m 'release $npm_package_version' && git push && git push --tags && npm publish",
|
||||
"release-patch": "npm run patch && npm run release",
|
||||
"release-minor": "npm run minor && npm run release",
|
||||
"release-major": "npm run major && npm run release"
|
||||
|
10
src/index.d.ts
vendored
10
src/index.d.ts
vendored
@@ -12,7 +12,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
onAccept?: () => void;
|
||||
onAccept?: Function;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
declineButtonText?: Function | React.ReactNode;
|
||||
@@ -43,4 +43,12 @@ export interface CookieConsentProps {
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
/**
|
||||
* Returns the value of the consent cookie
|
||||
* Retrieves the regular value first and if not found the legacy one according
|
||||
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
* @param {*} name optional name of the cookie
|
||||
*/
|
||||
export function getCookieConsentValue(name?: string): string;
|
||||
|
||||
export { Cookies };
|
||||
|
55
src/index.js
55
src/index.js
@@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
|
||||
NONE: "none",
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the value of the consent cookie
|
||||
* Retrieves the regular value first and if not found the legacy one according
|
||||
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
* @param {*} name optional name of the cookie
|
||||
*/
|
||||
export const getCookieConsentValue = (name = defaultCookieConsentName) => {
|
||||
let cookieValue = Cookies.get(name);
|
||||
|
||||
// if the cookieValue is undefined check for the legacy cookie
|
||||
if (cookieValue === undefined) {
|
||||
cookieValue = Cookies.get(getLegacyCookieName(name));
|
||||
}
|
||||
return cookieValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the legacy cookie name by the regular cookie name
|
||||
* @param {string} name of cookie to get
|
||||
*/
|
||||
const getLegacyCookieName = (name) => {
|
||||
return `${name}-legacy`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Default name of the cookie which is set by CookieConsent
|
||||
*/
|
||||
const defaultCookieConsentName = "CookieConsent";
|
||||
|
||||
/**
|
||||
* A function to wrap elements with a "wrapper" on a condition
|
||||
* @param {object} wrappingOptions
|
||||
@@ -28,7 +57,6 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
|
||||
class CookieConsent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.accept.bind(this);
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
@@ -129,14 +157,6 @@ class CookieConsent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the legacy cookie name by the regular cookie name
|
||||
* @param {string} name of cookie to get
|
||||
*/
|
||||
getLegacyCookieName(name) {
|
||||
return `${name}-legacy`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to set the consent cookie based on the provided variables
|
||||
* Sets two cookies to handle incompatible browsers, more details:
|
||||
@@ -154,7 +174,7 @@ class CookieConsent extends Component {
|
||||
|
||||
// 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) {
|
||||
Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
|
||||
Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
|
||||
}
|
||||
|
||||
// set the regular cookie
|
||||
@@ -168,14 +188,7 @@ class CookieConsent extends Component {
|
||||
*/
|
||||
getCookieValue() {
|
||||
const { cookieName } = this.props;
|
||||
|
||||
let cookieValue = Cookies.get(cookieName);
|
||||
|
||||
// if the cookieValue is undefined check for the legacy cookie
|
||||
if (cookieValue === undefined) {
|
||||
cookieValue = Cookies.get(this.getLegacyCookieName(cookieName));
|
||||
}
|
||||
return cookieValue;
|
||||
return getCookieConsentValue(cookieName);
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -281,7 +294,9 @@ class CookieConsent extends Component {
|
||||
className={buttonClasses}
|
||||
id={buttonId}
|
||||
aria-label={ariaAcceptLabel}
|
||||
onClick={this.accept}
|
||||
onClick={() => {
|
||||
this.accept();
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</ButtonComponent>
|
||||
@@ -363,7 +378,7 @@ CookieConsent.defaultProps = {
|
||||
location: OPTIONS.BOTTOM,
|
||||
onAccept: () => {},
|
||||
onDecline: () => {},
|
||||
cookieName: "CookieConsent",
|
||||
cookieName: defaultCookieConsentName,
|
||||
cookieValue: true,
|
||||
declineCookieValue: false,
|
||||
setDeclineCookie: true,
|
||||
|
@@ -7,6 +7,9 @@ module.exports = {
|
||||
path: path.resolve(__dirname, "build"),
|
||||
filename: "index.js",
|
||||
libraryTarget: "commonjs2", // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
|
||||
environment: {
|
||||
arrowFunction: false, // the generated runtime-code should not use arrow functions
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
Reference in New Issue
Block a user