mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02:00
Code Issues Projects Releases Wiki Activity

Added the ability to accept on scroll. Fixes #21

Browse Source
This commit is contained in:
Rick van Lieshout 2018-07-13 22:50:43 +02:00
parent ace3cf2886
commit 3f6c47ae6d
3 changed files with 117 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@ -4,26 +4,23 @@ A small, simple and customizable cookie consent bar for use in React application
[![NPM](https://nodei.co/npm/react-cookie-consent.png)](https://npmjs.org/package/react-cookie-consent)
Demo: https://mastermindzh.github.io/react-cookie-consent/
Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example
## Default look
![default look](https://raw.githubusercontent.com/Mastermindzh/react-cookie-consent/master/images/default.png)
## Installation
```
``` shell
npm install react-cookie-consent
```
or use yarn:
```
``` shell
yarn add react-cookie-consent
```
@ -31,21 +28,24 @@ yarn add react-cookie-consent
You can import the cookie bar like this:
```js
``` js
import CookieConsent from "react-cookie-consent";
```
If you want to set/remove cookies yourself you can optionally import Cookie (straight from js-cookie) like this:
```js
``` js
import CookieConsent, { Cookies } from "react-cookie-consent";
```
Then you can use the component anywhere in your React app like so:
```js
```jsx
<CookieConsent>
This website uses cookies to enhance the user experience.
</CookieConsent>
```
You can optionally set some props like this (next chapter will show all props):
```js
@ -81,19 +81,20 @@ One of the props (onAccept) is a function, this function will be called after th
| 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 |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| onAccept | function | `() => {}` | Function to be called after the accept 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. |
| containerClasses| string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the button|
| contentClasses| string | "" | CSS classes to apply to the content |
| 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 |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| onAccept | function | `() => {}` | Function to be called after the accept 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. |
| containerClasses| string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the 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. |
| contentStyle | object | [look at source][contentStyle] | React styling object for the content. |
## Debugging it
Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:
@ -107,7 +108,6 @@ Because the cookie consent bar will be hidden once accepted, you will have to se
**Note:** Dont forget to remove the `debug`-property for production.
## Styling it
You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button".
@ -131,6 +131,7 @@ You can use `disableStyles={true}` to disable any built-in styling.
```
#### changing the button font-weight to bold
```js
<CookieConsent
buttonStyle={{ fontWeight: "bold" }}
@ -139,6 +140,7 @@ You can use `disableStyles={true}` to disable any built-in styling.
```
#### Using predefined CSS classes
You can pass predefined CSS classes to the components using the `containerClasses`, `buttonClasses` and `contentClasses` props. The example below uses bootstrap classes:
```js
@ -158,7 +160,7 @@ You can pass predefined CSS classes to the components using the `containerClasse
Which results in:
![bootstrap styling](./images/css_classes.png)
![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
#### rainbows!

49
build/index.js
View File

@ -573,6 +573,8 @@ var CookieConsent = function (_Component) {
margin: "15px"
}
};
_this.handleScroll = _this.handleScroll.bind(_this);
return _this;
}
@ -588,6 +590,37 @@ var CookieConsent = function (_Component) {
if (_jsCookie2.default.get(cookieName) === undefined || debug) {
this.setState({ visible: true });
}
// if acceptOnScroll is set to true, add a listener
if (this.props.acceptOnScroll) {
window.addEventListener("scroll", this.handleScroll, { passive: true });
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// remove listener if still set
window.removeEventListener("scroll", this.handleScroll);
}
/**
* checks whether scroll has exceeded set amount and fire accept if so.
*/
}, {
key: "handleScroll",
value: function handleScroll() {
// (top / height) - height * 100
var rootNode = document.documentElement,
body = document.body,
top = "scrollTop",
height = "scrollHeight";
var percentage = (rootNode[top] || body[top]) / ((rootNode[height] || body[height]) - rootNode.clientHeight) * 100;
if (percentage > this.props.acceptOnScrollPercentage) {
this.accept();
}
}
/**
@ -600,8 +633,14 @@ var CookieConsent = function (_Component) {
var _props2 = this.props,
cookieName = _props2.cookieName,
expires = _props2.expires,
hideOnAccept = _props2.hideOnAccept;
hideOnAccept = _props2.hideOnAccept,
onAccept = _props2.onAccept;
// fire onAccept
onAccept();
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
_jsCookie2.default.set(cookieName, true, { expires: expires });
if (hideOnAccept) {
@ -624,7 +663,6 @@ var CookieConsent = function (_Component) {
buttonStyle = _props3.buttonStyle,
contentStyle = _props3.contentStyle,
disableStyles = _props3.disableStyles,
onAccept = _props3.onAccept,
buttonText = _props3.buttonText,
containerClasses = _props3.containerClasses,
contentClasses = _props3.contentClasses,
@ -675,7 +713,6 @@ var CookieConsent = function (_Component) {
className: buttonClasses,
onClick: function onClick() {
_this2.accept();
onAccept();
}
},
buttonText
@ -702,12 +739,16 @@ CookieConsent.propTypes = {
expires: _propTypes2.default.number,
containerClasses: _propTypes2.default.string,
contentClasses: _propTypes2.default.string,
buttonClasses: _propTypes2.default.string
buttonClasses: _propTypes2.default.string,
acceptOnScroll: _propTypes2.default.bool,
acceptOnScrollPercentage: _propTypes2.default.number
};
CookieConsent.defaultProps = {
disableStyles: false,
hideOnAccept: true,
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
location: OPTIONS.BOTTOM,
onAccept: function onAccept() {},
cookieName: "CookieConsent",

59
src/index.js
View File

@ -42,6 +42,8 @@ class CookieConsent extends Component {
margin: "15px"
}
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
@ -51,13 +53,48 @@ class CookieConsent extends Component {
if (Cookies.get(cookieName) === undefined || debug) {
this.setState({ visible: true });
}
// if acceptOnScroll 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();
}
}
/**
* Set a persistent cookie
*/
accept() {
const { cookieName, expires, hideOnAccept } = this.props;
const { cookieName, expires, hideOnAccept, onAccept } = this.props;
// fire onAccept
onAccept();
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
Cookies.set(cookieName, true, { expires: expires });
if (hideOnAccept) {
@ -77,7 +114,6 @@ class CookieConsent extends Component {
buttonStyle,
contentStyle,
disableStyles,
onAccept,
buttonText,
containerClasses,
contentClasses,
@ -123,7 +159,6 @@ class CookieConsent extends Component {
className={buttonClasses}
onClick={() => {
this.accept();
onAccept();
}}
>
{buttonText}
@ -142,27 +177,35 @@ CookieConsent.propTypes = {
disableStyles: PropTypes.bool,
hideOnAccept: PropTypes.bool,
onAccept: PropTypes.func,
buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
buttonText: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.element
]),
cookieName: PropTypes.string,
debug: PropTypes.bool,
expires: PropTypes.number,
containerClasses: PropTypes.string,
contentClasses: PropTypes.string,
buttonClasses: PropTypes.string
buttonClasses: PropTypes.string,
acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number
};
CookieConsent.defaultProps = {
disableStyles: false,
hideOnAccept: true,
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
location: OPTIONS.BOTTOM,
onAccept: () => {},
cookieName: "CookieConsent",
buttonText: "I understand",
debug: false,
expires: 365,
containerClasses:"",
contentClasses:"",
buttonClasses:""
containerClasses: "",
contentClasses: "",
buttonClasses: ""
};
export default CookieConsent;