mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-11-04 10:48:57 +01:00
Code Issues Projects Releases Wiki Activity

Remove scroll on accept (#89)

Browse Source
This commit is contained in:
Gerard Brull
2020-11-02 19:16:58 +01:00
committed by GitHub
parent f6243bd987
commit d0c619542d
3 changed files with 46 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
README.md
View File

@@ -28,7 +28,6 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
- [changing the bar background to red](#changing-the-bar-background-to-red) - [changing the bar background to red](#changing-the-bar-background-to-red)
- [changing the button font-weight to bold](#changing-the-button-font-weight-to-bold) - [changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
- [Using predefined CSS classes](#using-predefined-css-classes) - [Using predefined CSS classes](#using-predefined-css-classes)
- [Accept on scroll](#accept-on-scroll)
- [Flipping the buttons](#flipping-the-buttons) - [Flipping the buttons](#flipping-the-buttons)
- [Extra cookie options](#extra-cookie-options) - [Extra cookie options](#extra-cookie-options)
- [rainbows!](#rainbows) - [rainbows!](#rainbows)
@@ -85,18 +84,12 @@ You can optionally set some props like this (next chapter will show all props):
</CookieConsent> </CookieConsent>
``` ```
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 ```js
<CookieConsent <CookieConsent
acceptOnScroll={true} onAccept={() => {
onAccept={({ acceptedByScrolling }) => { alert("Accept was triggered by clicking the Accept button");
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> ></CookieConsent>
``` ```
@@ -114,47 +107,45 @@ If the decline button is enabled then the (onDecline) prop function can be used,
## Props ## Props
| Prop | Type | Default value | Description | | 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. | | 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 | | 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) | | 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) | | 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) | | buttonText | string or React component | "I understand" | Text to appear on the button |
| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| 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. |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | | onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
| onAccept | function | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | | expires | number | 365 | Number of days before the cookie expires. |
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | | extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
| expires | number | 365 | Number of days before the cookie expires. | | overlay | boolean | false | Whether to show a page obscuring overlay or not. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| overlay | boolean | false | Whether to show a page obscuring overlay or not. | | buttonClasses | string | "" | CSS classes to apply to the button |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| buttonClasses | string | "" | CSS classes to apply to the button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonId | string | "" | Id to apply to the button |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | declineButtonId | string | "" | Id to apply to the decline button |
| buttonId | string | "" | Id to apply to the button | | contentClasses | string | "" | CSS classes to apply to the content |
| declineButtonId | string | "" | Id to apply to the decline button | | overlayClasses | string | "" | CSS classes to apply to the surrounding overlay |
| contentClasses | string | "" | CSS classes to apply to the content | | style | object | [look at source][style] | React styling object for the bar. |
| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| style | object | [look at source][style] | React styling object for the bar. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. |
| 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) |
| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | ButtonComponent | React component | button | React Component to render as a button. |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| ButtonComponent | React component | button | React Component to render as a button. | | cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | | ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
## Debugging it ## Debugging it
@@ -228,22 +219,6 @@ Which results in:
![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true) ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true)
#### 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 #### Flipping the buttons
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around: If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:

4
src/index.d.ts vendored
View File

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
children?: React.ReactNode; children?: React.ReactNode;
disableStyles?: boolean; disableStyles?: boolean;
hideOnAccept?: boolean; hideOnAccept?: boolean;
onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void; onAccept?: () => void;
onDecline?: Function; onDecline?: Function;
buttonText?: Function | React.ReactNode; buttonText?: Function | React.ReactNode;
declineButtonText?: Function | React.ReactNode; declineButtonText?: Function | React.ReactNode;
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
declineButtonClasses?: string; declineButtonClasses?: string;
buttonId?: string; buttonId?: string;
declineButtonId?: string; declineButtonId?: string;
acceptOnScroll?: boolean;
acceptOnScrollPercentage?: number;
extraCookieOptions?: object; extraCookieOptions?: object;
disableButtonStyles?: boolean; disableButtonStyles?: boolean;
enableDeclineButton?: boolean; enableDeclineButton?: boolean;

54
src/index.js
View File

@@ -80,8 +80,6 @@ class CookieConsent extends Component {
backgroundColor: "rgba(0,0,0,0.3)", backgroundColor: "rgba(0,0,0,0.3)",
}, },
}; };
this.handleScroll = this.handleScroll.bind(this);
} }
componentDidMount() { componentDidMount() {
@@ -90,52 +88,18 @@ class CookieConsent extends Component {
// if cookie undefined or debug // if cookie undefined or debug
if (this.getCookieValue() === undefined || debug) { if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true }); 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 * Set a persistent accept cookie
*/ */
accept({ acceptedByScrolling = false }) { accept() {
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props; const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
this.setCookie(cookieName, cookieValue); this.setCookie(cookieName, cookieValue);
// fire onAccept onAccept();
onAccept({ acceptedByScrolling });
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
if (hideOnAccept) { if (hideOnAccept) {
this.setState({ visible: false }); this.setState({ visible: false });
@@ -149,10 +113,8 @@ class CookieConsent extends Component {
const { const {
cookieName, cookieName,
declineCookieValue, declineCookieValue,
expires,
hideOnDecline, hideOnDecline,
onDecline, onDecline,
extraCookieOptions,
setDeclineCookie, setDeclineCookie,
} = this.props; } = this.props;
@@ -160,12 +122,8 @@ class CookieConsent extends Component {
this.setCookie(cookieName, declineCookieValue); this.setCookie(cookieName, declineCookieValue);
} }
// fire onDecline
onDecline(); onDecline();
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
if (hideOnDecline) { if (hideOnDecline) {
this.setState({ visible: false }); this.setState({ visible: false });
} }
@@ -323,9 +281,7 @@ class CookieConsent extends Component {
className={buttonClasses} className={buttonClasses}
id={buttonId} id={buttonId}
aria-label={ariaAcceptLabel} aria-label={ariaAcceptLabel}
onClick={() => { onClick={this.accept}
this.accept({ acceptedByScrolling: false });
}}
> >
{buttonText} {buttonText}
</ButtonComponent> </ButtonComponent>
@@ -387,8 +343,6 @@ CookieConsent.propTypes = {
declineButtonClasses: PropTypes.string, declineButtonClasses: PropTypes.string,
buttonId: PropTypes.string, buttonId: PropTypes.string,
declineButtonId: PropTypes.string, declineButtonId: PropTypes.string,
acceptOnScroll: PropTypes.bool,
acceptOnScrollPercentage: PropTypes.number,
extraCookieOptions: PropTypes.object, extraCookieOptions: PropTypes.object,
disableButtonStyles: PropTypes.bool, disableButtonStyles: PropTypes.bool,
enableDeclineButton: PropTypes.bool, enableDeclineButton: PropTypes.bool,
@@ -406,8 +360,6 @@ CookieConsent.defaultProps = {
disableStyles: false, disableStyles: false,
hideOnAccept: true, hideOnAccept: true,
hideOnDecline: true, hideOnDecline: true,
acceptOnScroll: false,
acceptOnScrollPercentage: 25,
location: OPTIONS.BOTTOM, location: OPTIONS.BOTTOM,
onAccept: () => {}, onAccept: () => {},
onDecline: () => {}, onDecline: () => {},