New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-cookie-consent
Advanced tools
react-cookie-consent - npm Package Compare versions
Comparing version 5.1.1 to 5.1.2
@@ -8,2 +8,9 @@ # Changelog | ||
| ## [5.1.1] | ||
| ### changed | ||
| - Set cookie value before handling side-effects. | ||
| - The overlay is now conditional. Meaning that the component behaves exactly as it did prior to 5.1.0 when you do not use the overlay | ||
| ## [5.1.0] | ||
@@ -10,0 +17,0 @@ |
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "5.1.1", | ||
| "version": "5.1.2", | ||
| "description": "A small, simple and customizable cookie consent bar for use in React applications.", | ||
@@ -10,0 +10,0 @@ "main": "build/index.js", |
@@ -11,2 +11,4 @@ # :cookie: react-cookie-consent :cookie: | ||
|       | ||
| ## Default look | ||
@@ -115,41 +117,41 @@ | ||
| | 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 | | ||
| | overlay | boolean | false | Whether to show a page obscuring overlay or not. | | ||
| | 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 | | ||
| | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | ||
| | 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. | | ||
| | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | ||
| | 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. | | ||
| | 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 | | ||
| | overlay | boolean | false | Whether to show a page obscuring overlay or not. | | ||
| | 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 | | ||
| | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | ||
| | 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. | | ||
| | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | ||
| | 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. | | ||
@@ -283,8 +285,3 @@ ## Debugging it | ||
| ```js | ||
| <CookieConsent | ||
| location="bottom" | ||
| cookieName="myAwesomeCookieName3" | ||
| expires={999} | ||
| overlay | ||
| > | ||
| <CookieConsent location="bottom" cookieName="myAwesomeCookieName3" expires={999} overlay> | ||
| This website uses cookies to enhance the user experience. | ||
@@ -291,0 +288,0 @@ </CookieConsent> |
@@ -17,2 +17,13 @@ import React, { Component } from "react"; | ||
| /** | ||
| * A function to wrap elements with a "wrapper" on a condition | ||
| * @param {object} wrappingOptions | ||
| * condition == boolean condition, when to wrap | ||
| * wrapper == style to wrap. e.g <div>{children}</div> | ||
| * children == react passes whatever is between tags as children. Don't supply this yourself. | ||
| */ | ||
| const ConditionalWrapper = ({ condition, wrapper, children }) => { | ||
| return condition ? wrapper(children) : children; | ||
| }; | ||
| class CookieConsent extends Component { | ||
@@ -64,3 +75,3 @@ constructor(props) { | ||
| overlayStyle: { | ||
| position: "absolute", | ||
| position: "fixed", | ||
| left: 0, | ||
@@ -123,2 +134,4 @@ top: 0, | ||
| this.setCookie(cookieName, cookieValue); | ||
| // fire onAccept | ||
@@ -130,4 +143,2 @@ onAccept({ acceptedByScrolling }); | ||
| this.setCookie(cookieName, cookieValue); | ||
| if (hideOnAccept) { | ||
@@ -152,2 +163,6 @@ this.setState({ visible: false }); | ||
| if (setDeclineCookie) { | ||
| this.setCookie(cookieName, declineCookieValue); | ||
| } | ||
| // fire onDecline | ||
@@ -159,6 +174,2 @@ onDecline(); | ||
| if (setDeclineCookie) { | ||
| this.setCookie(cookieName, declineCookieValue); | ||
| } | ||
| if (hideOnDecline) { | ||
@@ -329,8 +340,11 @@ this.setState({ visible: false }); | ||
| const Wrapper = !overlay | ||
| ? (props) => <div {...props} /> | ||
| : (props) => <div {...props} style={myOverlayStyle} className={overlayClasses} />; | ||
| return ( | ||
| <Wrapper> | ||
| <ConditionalWrapper | ||
| condition={overlay} | ||
| wrapper={(children) => ( | ||
| <div style={myOverlayStyle} className={overlayClasses}> | ||
| {children} | ||
| </div> | ||
| )} | ||
| > | ||
| <div className={`${containerClasses}`} style={myStyle}> | ||
@@ -346,3 +360,3 @@ <div style={myContentStyle} className={contentClasses}> | ||
| </div> | ||
| </Wrapper> | ||
| </ConditionalWrapper> | ||
| ); | ||
@@ -349,0 +363,0 @@ } |
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Lines of code
- increased by0.91%
2870
Worsened metrics
- Total package byte prevSize
- decreased by-0.65%
224117
- Number of lines in readme file
- decreased by-0.95%
312
No dependency changes