mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-01-20 18:41:44 +01:00
Code Issues Projects Releases Wiki Activity

bugfix issue#68

Browse Source
This commit is contained in:
Rick van Lieshout 2020-05-26 17:16:01 +02:00
parent 22bb46981d
commit e7c2b5b39a
4 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
CHANGELOG.md
View File

@ -5,6 +5,20 @@ 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).
## [5.0.1]
- Fixed [Issue
69](https://github.com/Mastermindzh/react-cookie-consent/issues/69) by
removing location from the proptypes to avoid build-time issues
## [5.0.0]
### added
- CookieSecurity prop - allows securing the cookie
- sameSite prop - allows you to set sameSite properties so browser won't warn
about non-secure cookies :)
## [4.1.0] ## [4.1.0]
### changed ### changed

72
README.md
View File

@ -89,42 +89,42 @@ If the decline button is enabled then the (onDecline) prop function can be used,
## 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. |
| 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) |
| 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 |
| 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 | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. | | onAccept | function | `({ acceptedByScrolling }) => {}` | 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 |
| 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 | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| buttonId | string | "" | Id to apply to the button | | buttonId | string | "" | Id to apply to the button |
| declineButtonId | string | "" | Id to apply to the decline button | | declineButtonId | string | "" | Id to apply to the decline button |
| contentClasses | string | "" | CSS classes to apply to the content | | contentClasses | string | "" | CSS classes to apply to the content |
| style | object | [look at source][style] | React styling object for the bar. | | style | object | [look at source][style] | React styling object for the bar. |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | | 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) | | disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
| 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 | location ? location.protocol === "https:" : true | Cookie security level. Defaults to true unless running on http. | | cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
## Debugging it ## Debugging it

9
build/index.js
View File

@ -729,10 +729,14 @@ var CookieConsent = function (_Component) {
var _props3 = this.props, var _props3 = this.props,
extraCookieOptions = _props3.extraCookieOptions, extraCookieOptions = _props3.extraCookieOptions,
expires = _props3.expires, expires = _props3.expires,
sameSite = _props3.sameSite, sameSite = _props3.sameSite;
cookieSecurity = _props3.cookieSecurity; var cookieSecurity = this.props.cookieSecurity;
if (cookieSecurity === undefined) {
cookieSecurity = location ? location.protocol === "https:" : true;
}
var cookieOptions = _extends({ expires: expires }, extraCookieOptions, { sameSite: sameSite, secure: cookieSecurity }); var cookieOptions = _extends({ expires: expires }, extraCookieOptions, { sameSite: sameSite, secure: cookieSecurity });
// 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
@ -962,7 +966,6 @@ CookieConsent.defaultProps = {
enableDeclineButton: false, enableDeclineButton: false,
flipButtons: false, flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE, sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: function ButtonComponent(_ref2) { ButtonComponent: function ButtonComponent(_ref2) {
var children = _ref2.children, var children = _ref2.children,
props = _objectWithoutProperties(_ref2, ["children"]); props = _objectWithoutProperties(_ref2, ["children"]);

8
src/index.js
View File

@ -165,7 +165,12 @@ class CookieConsent extends Component {
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients * https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/ */
setCookie(cookieName, cookieValue) { setCookie(cookieName, cookieValue) {
const { extraCookieOptions, expires, sameSite, cookieSecurity } = this.props; const { extraCookieOptions, expires, sameSite } = this.props;
let { cookieSecurity } = this.props;
if (cookieSecurity === undefined) {
cookieSecurity = location ? location.protocol === "https:" : true;
}
let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity }; let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };
@ -382,7 +387,6 @@ CookieConsent.defaultProps = {
enableDeclineButton: false, enableDeclineButton: false,
flipButtons: false, flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE, sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>, ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
}; };