Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-cookie-consent

Package Overview
Dependencies
Maintainers
1
Versions
81
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cookie-consent - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

2

build/index.d.ts

@@ -35,3 +35,3 @@ import * as React from "react";

flipButtons?: boolean;
ButtonComponent?: Function | React.ReactElement;
ButtonComponent?: React.ElementType;
}

@@ -38,0 +38,0 @@

14

package.json

@@ -7,3 +7,3 @@ {

},
"version": "3.0.0",
"version": "4.0.0",
"description": "A small, simple and customizable cookie consent bar for use in React applications.",

@@ -13,6 +13,6 @@ "main": "build/index.js",

"dependencies": {
"js-cookie": "^2.2.0"
"js-cookie": "^2.2.1"
},
"peerDependencies": {
"react": "^16.4.0"
"react": "^16.13.1"
},

@@ -45,4 +45,4 @@ "scripts": {

"devDependencies": {
"@types/js-cookie": "^2.2.2",
"babel-cli": "^6.24.1",
"@types/js-cookie": "^2.2.6",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",

@@ -53,9 +53,9 @@ "babel-loader": "^7.1.4",

"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.5.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",
"react": "^16.8.6",
"react": "^16.13.1",
"webpack": "^2.6.1"
}
}

225

README.md

@@ -17,3 +17,3 @@ # :cookie: react-cookie-consent :cookie:

``` shell
```shell
npm install react-cookie-consent

@@ -24,3 +24,3 @@ ```

``` shell
```shell
yarn add react-cookie-consent

@@ -33,3 +33,3 @@ ```

``` js
```js
import CookieConsent from "react-cookie-consent";

@@ -40,3 +40,3 @@ ```

``` js
```js
import CookieConsent, { Cookies } from "react-cookie-consent";

@@ -48,5 +48,3 @@ ```

```jsx
<CookieConsent>
This website uses cookies to enhance the user experience.
</CookieConsent>
<CookieConsent>This website uses cookies to enhance the user experience.</CookieConsent>
```

@@ -58,13 +56,11 @@

<CookieConsent
location="bottom"
buttonText="Sure man!!"
cookieName="myAwesomeCookieName2"
style={{ background: "#2B373B" }}
buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
expires={150}
location="bottom"
buttonText="Sure man!!"
cookieName="myAwesomeCookieName2"
style={{ background: "#2B373B" }}
buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
expires={150}
>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>
This bit of text is smaller :O
</span>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>

@@ -77,14 +73,12 @@ ```

<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");
}
}}
>
</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");
}
}}
></CookieConsent>
```

@@ -96,44 +90,46 @@

<CookieConsent
enableDeclineButton
onDecline={() => {alert("nay!")}}
>
</CookieConsent>
enableDeclineButton
onDecline={() => {
alert("nay!");
}}
></CookieConsent>
```
## 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 |
| 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.
| 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. |
## Debugging it

@@ -144,6 +140,3 @@

```js
<CookieConsent
debug={true}
>
</CookieConsent>
<CookieConsent debug={true}></CookieConsent>
```

@@ -169,6 +162,3 @@

```js
<CookieConsent
style={{ background: "red" }}
>
</CookieConsent>
<CookieConsent style={{ background: "red" }}></CookieConsent>
```

@@ -179,6 +169,3 @@

```js
<CookieConsent
buttonStyle={{ fontWeight: "bold" }}
>
</CookieConsent>
<CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>
```

@@ -191,14 +178,12 @@

```js
<CookieConsent
disableStyles={true}
location={OPTIONS.BOTTOM}
buttonClasses="btn btn-primary"
containerClasses="alert alert-warning col-lg-12"
contentClasses="text-capitalize"
>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>
This bit of text is smaller :O
</span>
</CookieConsent>
<CookieConsent
disableStyles={true}
location={OPTIONS.BOTTOM}
buttonClasses="btn btn-primary"
containerClasses="alert alert-warning col-lg-12"
contentClasses="text-capitalize"
>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>
```

@@ -210,4 +195,4 @@

#### Accept on scroll
#### Accept on scroll
You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.

@@ -217,7 +202,9 @@

<CookieConsent
acceptOnScroll={true}
acceptOnScrollPercentage={50}
onAccept={() => {alert("consent given")}}
acceptOnScroll={true}
acceptOnScrollPercentage={50}
onAccept={() => {
alert("consent given");
}}
>
Hello scroller :)
Hello scroller :)
</CookieConsent>

@@ -227,10 +214,8 @@ ```

#### Flipping the buttons
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:
```js
<CookieConsent
enableDeclineButton
flipButtons
>
Flipped buttons
<CookieConsent enableDeclineButton flipButtons>
Flipped buttons
</CookieConsent>

@@ -244,10 +229,7 @@ ```

#### Extra cookie options
You can add more cookie options using the extraCookieOptions parameter like so:
```js
<CookieConsent
extraCookieOptions={{domain: 'myexample.com'}}
>
cookie bar
</CookieConsent>
<CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
```

@@ -263,11 +245,17 @@

<CookieConsent
buttonText="OMG DOUBLE RAINBOW"
cookieName="myAwesomeCookieName2"
style={{ background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)", textShadow: "2px 2px black" }}
buttonStyle={{background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)", color:"white", fontWeight: "bolder", textShadow: "2px 2px black"}}
buttonText="OMG DOUBLE RAINBOW"
cookieName="myAwesomeCookieName2"
style={{
background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)",
textShadow: "2px 2px black",
}}
buttonStyle={{
background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)",
color: "white",
fontWeight: "bolder",
textShadow: "2px 2px black",
}}
>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>
This bit of text is smaller :O
</span>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>This bit of text is smaller :O</span>
</CookieConsent>

@@ -277,6 +265,7 @@ ```

<!-- links -->
[style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L18-L29
[buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L30-L40
[declineButtonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L41-L51
[contentStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55
[buttonstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L30-L40
[declinebuttonstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L41-L51
[contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55

@@ -289,3 +278,3 @@ ## Projects using react-cookie-consent

- [comicrelief's storybook](https://github.com/comicrelief/storybook)
- [inici Gatsby theme](https://github.com/kuworking/gatsby-theme-inici#readme)
- [inici Gatsby theme](https://github.com/kuworking/gatsby-theme-kuworking-core)
- [Scrivito Example App](https://github.com/Scrivito/scrivito_example_app_js)

2

src/index.d.ts

@@ -35,3 +35,3 @@ import * as React from "react";

flipButtons?: boolean;
ButtonComponent?: Function | React.ReactElement;
ButtonComponent?: React.ElementType;
}

@@ -38,0 +38,0 @@

41

src/index.js

@@ -8,3 +8,3 @@ import React, { Component } from "react";

BOTTOM: "bottom",
NONE: "none"
NONE: "none",
};

@@ -29,3 +29,3 @@

width: "100%",
zIndex: "999"
zIndex: "999",
},

@@ -41,3 +41,3 @@ buttonStyle: {

padding: "5px 10px",
margin: "15px"
margin: "15px",
},

@@ -53,8 +53,8 @@ declineButtonStyle: {

padding: "5px 10px",
margin: "15px"
margin: "15px",
},
contentStyle: {
flex: "1 0 300px",
margin: "15px"
}
margin: "15px",
},
};

@@ -114,3 +114,3 @@

onAccept,
extraCookieOptions
extraCookieOptions,
} = this.props;

@@ -142,3 +142,3 @@

extraCookieOptions,
setDeclineCookie
setDeclineCookie,
} = this.props;

@@ -179,2 +179,3 @@

buttonClasses,
buttonWrapperClasses,
declineButtonClasses,

@@ -186,3 +187,3 @@ buttonId,

flipButtons,
ButtonComponent
ButtonComponent,
} = this.props;

@@ -268,9 +269,11 @@

return (
<div className={`cookieConsent ${containerClasses}`} style={myStyle}>
<div className={`${containerClasses}`} style={myStyle}>
<div style={myContentStyle} className={contentClasses}>
{this.props.children}
</div>
{buttonsToRender.map(button => {
return button;
})}
<div className={`${buttonWrapperClasses}`}>
{buttonsToRender.map((button) => {
return button;
})}
</div>
</div>

@@ -282,3 +285,3 @@ );

CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map(key => OPTIONS[key])),
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
style: PropTypes.object,

@@ -305,2 +308,3 @@ buttonStyle: PropTypes.object,

buttonClasses: PropTypes.string,
buttonWrapperClasses: PropTypes.string,
declineButtonClasses: PropTypes.string,

@@ -315,3 +319,3 @@ buttonId: PropTypes.string,

flipButtons: PropTypes.bool,
ButtonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
ButtonComponent: PropTypes.elementType,
};

@@ -339,5 +343,6 @@

buttonClasses: "",
buttonWrapperClasses: "",
declineButtonClasses: "",
buttonId: "",
declineButtonId: "",
buttonId: "rcc-confirm-button",
declineButtonId: "rcc-decline-button",
extraCookieOptions: {},

@@ -347,3 +352,3 @@ disableButtonStyles: false,

flipButtons: false,
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
};

@@ -350,0 +355,0 @@ 

build/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc