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.2.0 to 6.0.0
@@ -15,3 +15,3 @@ import * as React from "react"; | ||
| hideOnAccept?: boolean; | ||
| onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void; | ||
| onAccept?: Function; | ||
| onDecline?: Function; | ||
@@ -33,4 +33,2 @@ buttonText?: Function | React.ReactNode; | ||
| declineButtonId?: string; | ||
| acceptOnScroll?: boolean; | ||
| acceptOnScrollPercentage?: number; | ||
| extraCookieOptions?: object; | ||
@@ -37,0 +35,0 @@ disableButtonStyles?: boolean; |
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "5.2.0", | ||
| "version": "6.0.0", | ||
| "description": "A small, simple and customizable cookie consent bar for use in React applications.", | ||
@@ -13,3 +13,4 @@ "main": "build/index.js", | ||
| "dependencies": { | ||
| "js-cookie": "^2.2.1" | ||
| "js-cookie": "^2.2.1", | ||
| "prop-types": "^15.7.2" | ||
| }, | ||
@@ -46,19 +47,18 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.12.1", | ||
| "@babel/core": "^7.12.3", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.12.1", | ||
| "@babel/plugin-transform-object-assign": "^7.12.1", | ||
| "@babel/plugin-transform-react-jsx": "^7.12.1", | ||
| "@babel/preset-env": "^7.12.1", | ||
| "@mastermindzh/prettier-config": "^1.0.0", | ||
| "@types/js-cookie": "^2.2.6", | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.3", | ||
| "babel-loader": "^7.1.4", | ||
| "babel-plugin-transform-object-assign": "^6.22.0", | ||
| "babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
| "babel-plugin-transform-react-jsx": "^6.24.1", | ||
| "babel-preset-env": "^1.7.0", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-stage-1": "^6.24.1", | ||
| "copy-webpack-plugin": "^4.6.0", | ||
| "husky": "^4.2.5", | ||
| "lint-staged": "^10.2.10", | ||
| "prettier": "^2.0.5", | ||
| "babel-loader": "^8.1.0", | ||
| "copy-webpack-plugin": "^6.2.1", | ||
| "husky": "^4.3.0", | ||
| "lint-staged": "^10.5.1", | ||
| "prettier": "^2.1.2", | ||
| "react": "^16.13.1", | ||
| "webpack": "^2.6.1" | ||
| "webpack": "^5.3.2", | ||
| "webpack-cli": "^4.1.0" | ||
| }, | ||
@@ -65,0 +65,0 @@ "prettier": "@mastermindzh/prettier-config", |
108
README.md
@@ -31,3 +31,2 @@ # :cookie: react-cookie-consent :cookie: | ||
| - [Using predefined CSS classes](#using-predefined-css-classes) | ||
| - [Accept on scroll](#accept-on-scroll) | ||
| - [Flipping the buttons](#flipping-the-buttons) | ||
@@ -89,14 +88,8 @@ - [Extra cookie options](#extra-cookie-options) | ||
| One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. It is called with an object containing a boolean property `acceptedByScrolling` to indicate if the acceptance was triggered by the user scrolling. You can provide a function like so: | ||
| One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so: | ||
| ```js | ||
| <CookieConsent | ||
| acceptOnScroll={true} | ||
| onAccept={({ acceptedByScrolling }) => { | ||
| if (acceptedByScrolling) { | ||
| // triggered if user scrolls past threshold | ||
| alert("Accept was triggered by user scrolling"); | ||
| } else { | ||
| alert("Accept was triggered by clicking the Accept button"); | ||
| } | ||
| onAccept={() => { | ||
| alert("Accept was triggered by clicking the Accept button"); | ||
| }} | ||
@@ -119,41 +112,41 @@ ></CookieConsent> | ||
| | 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) | | ||
| | 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 | `() => {}` | 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. | | ||
| | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button | | ||
| | ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button | | ||
@@ -186,3 +179,2 @@ ## Debugging it | ||
| ## Styling it | ||
@@ -234,18 +226,2 @@ | ||
| #### Accept on scroll | ||
| You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage. | ||
| ```js | ||
| <CookieConsent | ||
| acceptOnScroll={true} | ||
| acceptOnScrollPercentage={50} | ||
| onAccept={() => { | ||
| alert("consent given"); | ||
| }} | ||
| > | ||
| Hello scroller :) | ||
| </CookieConsent> | ||
| ``` | ||
| #### Flipping the buttons | ||
@@ -252,0 +228,0 @@ |
@@ -15,3 +15,3 @@ import * as React from "react"; | ||
| hideOnAccept?: boolean; | ||
| onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void; | ||
| onAccept?: Function; | ||
| onDecline?: Function; | ||
@@ -33,4 +33,2 @@ buttonText?: Function | React.ReactNode; | ||
| declineButtonId?: string; | ||
| acceptOnScroll?: boolean; | ||
| acceptOnScrollPercentage?: number; | ||
| extraCookieOptions?: object; | ||
@@ -37,0 +35,0 @@ disableButtonStyles?: boolean; |
@@ -31,3 +31,2 @@ import React, { Component } from "react"; | ||
| super(props); | ||
| this.accept.bind(this); | ||
@@ -84,4 +83,2 @@ this.state = { | ||
| }; | ||
| this.handleScroll = this.handleScroll.bind(this); | ||
| } | ||
@@ -95,39 +92,9 @@ | ||
| this.setState({ visible: true }); | ||
| // if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener. | ||
| if (this.props.acceptOnScroll) { | ||
| window.addEventListener("scroll", this.handleScroll, { passive: true }); | ||
| } | ||
| } | ||
| } | ||
| componentWillUnmount() { | ||
| // remove listener if still set | ||
| window.removeEventListener("scroll", this.handleScroll); | ||
| } | ||
| /** | ||
| * checks whether scroll has exceeded set amount and fire accept if so. | ||
| */ | ||
| handleScroll() { | ||
| // (top / height) - height * 100 | ||
| let rootNode = document.documentElement, | ||
| body = document.body, | ||
| top = "scrollTop", | ||
| height = "scrollHeight"; | ||
| let percentage = | ||
| ((rootNode[top] || body[top]) / | ||
| ((rootNode[height] || body[height]) - rootNode.clientHeight)) * | ||
| 100; | ||
| if (percentage > this.props.acceptOnScrollPercentage) { | ||
| this.accept({ acceptedByScrolling: true }); | ||
| } | ||
| } | ||
| /** | ||
| * Set a persistent accept cookie | ||
| */ | ||
| accept({ acceptedByScrolling = false }) { | ||
| accept() { | ||
| const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props; | ||
@@ -137,8 +104,4 @@ | ||
| // fire onAccept | ||
| onAccept({ acceptedByScrolling }); | ||
| onAccept(); | ||
| // remove listener if set | ||
| window.removeEventListener("scroll", this.handleScroll); | ||
| if (hideOnAccept) { | ||
@@ -156,6 +119,4 @@ this.setState({ visible: false }); | ||
| declineCookieValue, | ||
| expires, | ||
| hideOnDecline, | ||
| onDecline, | ||
| extraCookieOptions, | ||
| setDeclineCookie, | ||
@@ -168,8 +129,4 @@ } = this.props; | ||
| // fire onDecline | ||
| onDecline(); | ||
| // remove listener if set | ||
| window.removeEventListener("scroll", this.handleScroll); | ||
| if (hideOnDecline) { | ||
@@ -333,3 +290,3 @@ this.setState({ visible: false }); | ||
| onClick={() => { | ||
| this.accept({ acceptedByScrolling: false }); | ||
| this.accept(); | ||
| }} | ||
@@ -397,4 +354,2 @@ > | ||
| declineButtonId: PropTypes.string, | ||
| acceptOnScroll: PropTypes.bool, | ||
| acceptOnScrollPercentage: PropTypes.number, | ||
| extraCookieOptions: PropTypes.object, | ||
@@ -417,4 +372,2 @@ disableButtonStyles: PropTypes.bool, | ||
| hideOnDecline: true, | ||
| acceptOnScroll: false, | ||
| acceptOnScrollPercentage: 25, | ||
| location: OPTIONS.BOTTOM, | ||
@@ -421,0 +374,0 @@ onAccept: () => {}, |
@@ -1,10 +0,10 @@ | ||
| var path = require('path'); | ||
| var CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
| var path = require("path"); | ||
| var CopyWebpackPlugin = require("copy-webpack-plugin"); | ||
| module.exports = { | ||
| entry: './src/index.js', | ||
| entry: "./src/index.js", | ||
| output: { | ||
| 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. | ||
| 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. | ||
| }, | ||
@@ -15,19 +15,17 @@ module: { | ||
| test: /\.js$/, | ||
| include: path.resolve(__dirname, 'src'), | ||
| include: path.resolve(__dirname, "src"), | ||
| exclude: /(node_modules|bower_components|build)/, | ||
| use: { | ||
| loader: 'babel-loader', | ||
| loader: "babel-loader", | ||
| options: { | ||
| presets: ['env'] | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| presets: ["@babel/preset-env"], | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| externals: { | ||
| 'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React. | ||
| react: "commonjs react", // this line is just to use the React dependency of our parent-testing-project instead of using our own React. | ||
| }, | ||
| plugins: [ | ||
| new CopyWebpackPlugin([{ from: 'src/index.d.ts', to: 'index.d.ts' }]) | ||
| ] | ||
| plugins: [new CopyWebpackPlugin({ patterns: [{ from: "src/index.d.ts", to: "index.d.ts" }] })], | ||
| }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Improved metrics
- Dev dependency count
- decreased by-5.88%
16
- Number of package files
- increased by5.88%
18
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-28.94%
161600
- Dependency count
- increased by50%
3
- Lines of code
- decreased by-60.55%
1141
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-7.27%
306
Dependency changes
+ Addedprop-types@^15.7.2