11 Commits
6.0.0 ... 6.2.2

9 changed files with 754 additions and 2618 deletions

1
.gitignore vendored
View File

@@ -1 +1,2 @@
node_modules node_modules
build/index.js.LICENSE.txt

View File

@@ -5,6 +5,29 @@ 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).
## [[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)] ## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
### added ### added

View File

@@ -22,16 +22,16 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
- [Using it](#using-it) - [Using it](#using-it)
- [Props](#props) - [Props](#props)
- [Debugging it](#debugging-it) - [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) - [Styling it](#styling-it)
- [Examples](#examples) - [Examples](#examples)
- [changing the bar background to red](#changing-the-bar-background-to-red) - [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 button font-weight to bold](#changing-the-button-font-weight-to-bold)
- [Using predefined CSS classes](#using-predefined-css-classes) - [Using predefined CSS classes](#using-predefined-css-classes)
- [Flipping the buttons](#flipping-the-buttons) - [Flipping the buttons](#flipping-the-buttons)
- [Extra cookie options](#extra-cookie-options) - [Extra cookie options](#extra-cookie-options)
- [rainbows!](#rainbows) - [Rainbows!](#rainbows)
- [contributor information](#contributor-information) - [Contributor information](#contributor-information)
- [Projects using react-cookie-consent](#projects-using-react-cookie-consent) - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
<!-- tocstop --> <!-- tocstop -->
@@ -105,6 +105,16 @@ If the decline button is enabled then the (onDecline) prop function can be used,
></CookieConsent> ></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 ## Props
| Prop | Type | Default value | Description | | Prop | Type | Default value | Description |
@@ -186,13 +196,13 @@ You can use `disableStyles={true}` to disable any built-in styling.
### Examples ### Examples
#### changing the bar background to red #### Changing the bar background to red
```js ```js
<CookieConsent style={{ background: "red" }}></CookieConsent> <CookieConsent style={{ background: "red" }}></CookieConsent>
``` ```
#### changing the button font-weight to bold #### Changing the button font-weight to bold
```js ```js
<CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent> <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> <CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
``` ```
#### rainbows! #### Rainbows!
![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true) ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)
@@ -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 [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 [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: When making a PR please think about the following things:

12
build/index.d.ts vendored
View File

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void; onAccept?: Function;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
declineButtonClasses?: string; declineButtonClasses?: string;
buttonId?: string; buttonId?: string;
declineButtonId?: string; declineButtonId?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
extraCookieOptions?: object; extraCookieOptions?: object;
disableButtonStyles?: boolean; disableButtonStyles?: boolean;
enableDeclineButton?: boolean; enableDeclineButton?: boolean;
@@ -45,4 +43,12 @@ export interface CookieConsentProps {
export default class CookieConsent extends React.Component<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);
export { Cookies }; export { Cookies };

File diff suppressed because it is too large Load Diff

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{ {
"name": "react-cookie-consent", "name": "react-cookie-consent",
"version": "5.2.0", "version": "6.2.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@@ -4,7 +4,7 @@
"name": "Rick van Lieshout", "name": "Rick van Lieshout",
"email": "info@rickvanlieshout.com" "email": "info@rickvanlieshout.com"
}, },
"version": "5.2.0", "version": "6.2.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",
@@ -13,7 +13,7 @@
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.13.1" "react": "^16.13.1 || ^17.0.0"
}, },
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
@@ -21,7 +21,8 @@
"patch": "npm --no-git-tag-version version patch", "patch": "npm --no-git-tag-version version patch",
"minor": "npm --no-git-tag-version version minor", "minor": "npm --no-git-tag-version version minor",
"major": "npm --no-git-tag-version version major", "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-patch": "npm run patch && npm run release",
"release-minor": "npm run minor && npm run release", "release-minor": "npm run minor && npm run release",
"release-major": "npm run major && npm run release" "release-major": "npm run major && npm run release"

10
src/index.d.ts vendored
View File

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: () => void; onAccept?: Function;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -43,4 +43,12 @@ export interface CookieConsentProps {
export default class CookieConsent extends React.Component<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 }; export { Cookies };

View File

@@ -14,6 +14,35 @@ export const SAME_SITE_OPTIONS = {
NONE: "none", 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 * A function to wrap elements with a "wrapper" on a condition
* @param {object} wrappingOptions * @param {object} wrappingOptions
@@ -28,7 +57,6 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
class CookieConsent extends Component { class CookieConsent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.accept.bind(this);
this.state = { this.state = {
visible: false, 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 * Function to set the consent cookie based on the provided variables
* Sets two cookies to handle incompatible browsers, more details: * 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 // 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) { if (sameSite === SAME_SITE_OPTIONS.NONE) {
Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions); Cookies.set(getLegacyCookieName(cookieName), cookieValue, cookieOptions);
} }
// set the regular cookie // set the regular cookie
@@ -168,14 +188,7 @@ class CookieConsent extends Component {
*/ */
getCookieValue() { getCookieValue() {
const { cookieName } = this.props; const { cookieName } = this.props;
return getCookieConsentValue(cookieName);
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;
} }
render() { render() {
@@ -281,7 +294,9 @@ class CookieConsent extends Component {
className={buttonClasses} className={buttonClasses}
id={buttonId} id={buttonId}
aria-label={ariaAcceptLabel} aria-label={ariaAcceptLabel}
onClick={this.accept} onClick={() => {
this.accept();
}}
> >
{buttonText} {buttonText}
</ButtonComponent> </ButtonComponent>
@@ -363,7 +378,7 @@ CookieConsent.defaultProps = {
location: OPTIONS.BOTTOM, location: OPTIONS.BOTTOM,
onAccept: () => {}, onAccept: () => {},
onDecline: () => {}, onDecline: () => {},
cookieName: "CookieConsent", cookieName: defaultCookieConsentName,
cookieValue: true, cookieValue: true,
declineCookieValue: false, declineCookieValue: false,
setDeclineCookie: true, setDeclineCookie: true,