mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-01-20 18:41:44 +01:00
bugfix issue#68
This commit is contained in:
parent
22bb46981d
commit
e7c2b5b39a
14
CHANGELOG.md
14
CHANGELOG.md
@ -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/),
|
||||
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]
|
||||
|
||||
### changed
|
||||
|
||||
72
README.md
72
README.md
@ -89,42 +89,42 @@ If the decline button is enabled then the (onDecline) prop function can be used,
|
||||
|
||||
## Props
|
||||
|
||||
| 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. |
|
||||
| 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) |
|
||||
| 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) |
|
||||
| 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 |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
|
||||
| containerClasses | string | "" | CSS classes to apply to the surrounding container |
|
||||
| buttonClasses | string | "" | CSS classes to apply to the button |
|
||||
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
|
||||
| declineButtonClasses | string | "" | CSS classes to apply to the decline button |
|
||||
| buttonId | string | "" | Id to apply to the button |
|
||||
| declineButtonId | string | "" | Id to apply to the decline button |
|
||||
| contentClasses | string | "" | CSS classes to apply to the content |
|
||||
| style | object | [look at source][style] | React styling object for the bar. |
|
||||
| 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. |
|
||||
| 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) |
|
||||
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
|
||||
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
|
||||
| ButtonComponent | React component | button | React Component to render as a button. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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) |
|
||||
| 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) |
|
||||
| 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 |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
|
||||
| containerClasses | string | "" | CSS classes to apply to the surrounding container |
|
||||
| buttonClasses | string | "" | CSS classes to apply to the button |
|
||||
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
|
||||
| declineButtonClasses | string | "" | CSS classes to apply to the decline button |
|
||||
| buttonId | string | "" | Id to apply to the button |
|
||||
| declineButtonId | string | "" | Id to apply to the decline button |
|
||||
| contentClasses | string | "" | CSS classes to apply to the content |
|
||||
| style | object | [look at source][style] | React styling object for the bar. |
|
||||
| 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. |
|
||||
| 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) |
|
||||
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
|
||||
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
|
||||
| ButtonComponent | React component | button | React Component to render as a button. |
|
||||
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
|
||||
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
|
||||
|
||||
## Debugging it
|
||||
|
||||
|
||||
@ -729,10 +729,14 @@ var CookieConsent = function (_Component) {
|
||||
var _props3 = this.props,
|
||||
extraCookieOptions = _props3.extraCookieOptions,
|
||||
expires = _props3.expires,
|
||||
sameSite = _props3.sameSite,
|
||||
cookieSecurity = _props3.cookieSecurity;
|
||||
sameSite = _props3.sameSite;
|
||||
var cookieSecurity = this.props.cookieSecurity;
|
||||
|
||||
|
||||
if (cookieSecurity === undefined) {
|
||||
cookieSecurity = location ? location.protocol === "https:" : true;
|
||||
}
|
||||
|
||||
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
|
||||
@ -962,7 +966,6 @@ CookieConsent.defaultProps = {
|
||||
enableDeclineButton: false,
|
||||
flipButtons: false,
|
||||
sameSite: SAME_SITE_OPTIONS.NONE,
|
||||
cookieSecurity: location ? location.protocol === "https:" : true,
|
||||
ButtonComponent: function ButtonComponent(_ref2) {
|
||||
var children = _ref2.children,
|
||||
props = _objectWithoutProperties(_ref2, ["children"]);
|
||||
|
||||
@ -165,7 +165,12 @@ class CookieConsent extends Component {
|
||||
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
|
||||
*/
|
||||
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 };
|
||||
|
||||
@ -382,7 +387,6 @@ CookieConsent.defaultProps = {
|
||||
enableDeclineButton: false,
|
||||
flipButtons: false,
|
||||
sameSite: SAME_SITE_OPTIONS.NONE,
|
||||
cookieSecurity: location ? location.protocol === "https:" : true,
|
||||
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user