mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 09:35:04 +02:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
86226dfbe3 | ||
|
|
d0c619542d | ||
| f6243bd987 | |||
| d99d88f5b8 | |||
| f51e2a0555 | |||
| 5e4e8406e6 | |||
| b1913d223e |
8
.babelrc
8
.babelrc
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"presets": ["env"],
|
||||
"presets": ["@babel/preset-env"],
|
||||
"plugins": [
|
||||
"transform-object-rest-spread",
|
||||
"transform-react-jsx",
|
||||
"transform-object-assign"
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
"@babel/plugin-transform-react-jsx",
|
||||
"@babel/plugin-transform-object-assign"
|
||||
]
|
||||
}
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1 @@
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [[5.2.0](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.2.0)]
|
||||
|
||||
### added
|
||||
|
||||
Added aria labels for both the decline and accept button
|
||||
|
||||
## [[5.1.4](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/5.1.4)]
|
||||
|
||||
### changed
|
||||
|
||||
152
CONTRIBUTING.md
Normal file
152
CONTRIBUTING.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# Contributing
|
||||
|
||||
When contributing to this repository, please first discuss the change you wish to make via issue,
|
||||
email, or any other method with the owners of this repository before making a changes in order to avoid wasting your time.
|
||||
|
||||
## scope
|
||||
|
||||
Please keep the scope of a PR down to a single change.
|
||||
You can make multiple prs to change multiple things though.
|
||||
|
||||
## builds
|
||||
|
||||
Don't modify anything in the build/ directory please.
|
||||
This will be done on release.
|
||||
|
||||
## Pull Request Process
|
||||
|
||||
1. Code away :D
|
||||
2. Update the README.md with details of changes to the interface, this includes new environment
|
||||
variables, exposed ports, useful file locations and container parameters.
|
||||
_Please don't change the format of the variable table in the README_
|
||||
3. Add the section "[next]" to the CHANGELOG.md and describe what you changed and why.
|
||||
4. Create the PR. yay.
|
||||
|
||||
## Contributor Covenant Code of Conduct
|
||||
|
||||
### Our Pledge
|
||||
|
||||
We as members, contributors, and leaders pledge to make participation in our
|
||||
community a harassment-free experience for everyone, regardless of age, body
|
||||
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
||||
identity and expression, level of experience, education, socio-economic status,
|
||||
nationality, personal appearance, race, religion, or sexual identity
|
||||
and orientation.
|
||||
|
||||
We pledge to act and interact in ways that contribute to an open, welcoming,
|
||||
diverse, inclusive, and healthy community.
|
||||
|
||||
### Our Standards
|
||||
|
||||
Examples of behavior that contributes to a positive environment for our
|
||||
community include:
|
||||
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes,
|
||||
and learning from the experience
|
||||
- Focusing on what is best not just for us as individuals, but for the
|
||||
overall community
|
||||
|
||||
Examples of unacceptable behavior include:
|
||||
|
||||
- The use of sexualized language or imagery, and sexual attention or
|
||||
advances of any kind
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or email
|
||||
address, without their explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a
|
||||
professional setting
|
||||
|
||||
### Enforcement Responsibilities
|
||||
|
||||
Community leaders are responsible for clarifying and enforcing our standards of
|
||||
acceptable behavior and will take appropriate and fair corrective action in
|
||||
response to any behavior that they deem inappropriate, threatening, offensive,
|
||||
or harmful.
|
||||
|
||||
Community leaders have the right and responsibility to remove, edit, or reject
|
||||
comments, commits, code, wiki edits, issues, and other contributions that are
|
||||
not aligned to this Code of Conduct, and will communicate reasons for moderation
|
||||
decisions when appropriate.
|
||||
|
||||
### Scope
|
||||
|
||||
This Code of Conduct applies within all community spaces, and also applies when
|
||||
an individual is officially representing the community in public spaces.
|
||||
Examples of representing our community include using an official e-mail address,
|
||||
posting via an official social media account, or acting as an appointed
|
||||
representative at an online or offline event.
|
||||
|
||||
### Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported to the community leaders responsible for enforcement at
|
||||
[info@rickvanlieshout.com](mailto:info@rickvanlieshout.com).
|
||||
All complaints will be reviewed and investigated fairly.
|
||||
|
||||
All community leaders are obligated to respect the privacy and security of the
|
||||
reporter of any incident.
|
||||
|
||||
### Enforcement Guidelines
|
||||
|
||||
Community leaders will follow these Community Impact Guidelines in determining
|
||||
the consequences for any action they deem in violation of this Code of Conduct:
|
||||
|
||||
#### 1. Correction
|
||||
|
||||
**Community Impact**: Use of inappropriate language or other behavior deemed
|
||||
unprofessional or unwelcome in the community.
|
||||
|
||||
**Consequence**: A private, written warning from community leaders, providing
|
||||
clarity around the nature of the violation and an explanation of why the
|
||||
behavior was inappropriate. A public apology may be requested.
|
||||
|
||||
#### 2. Warning
|
||||
|
||||
**Community Impact**: A violation through a single incident or series
|
||||
of actions.
|
||||
|
||||
**Consequence**: A warning with consequences for continued behavior. No
|
||||
interaction with the people involved, including unsolicited interaction with
|
||||
those enforcing the Code of Conduct, for a specified period of time. This
|
||||
includes avoiding interactions in community spaces as well as external channels
|
||||
like social media. Violating these terms may lead to a temporary or
|
||||
permanent ban.
|
||||
|
||||
#### 3. Temporary Ban
|
||||
|
||||
**Community Impact**: A serious violation of community standards, including
|
||||
sustained inappropriate behavior.
|
||||
|
||||
**Consequence**: A temporary ban from any sort of interaction or public
|
||||
communication with the community for a specified period of time. No public or
|
||||
private interaction with the people involved, including unsolicited interaction
|
||||
with those enforcing the Code of Conduct, is allowed during this period.
|
||||
Violating these terms may lead to a permanent ban.
|
||||
|
||||
#### 4. Permanent Ban
|
||||
|
||||
**Community Impact**: Demonstrating a pattern of violation of community
|
||||
standards, including sustained inappropriate behavior, harassment of an
|
||||
individual, or aggression toward or disparagement of classes of individuals.
|
||||
|
||||
**Consequence**: A permanent ban from any sort of public interaction within
|
||||
the community.
|
||||
|
||||
### Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
||||
version 2.0, available at
|
||||
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
|
||||
|
||||
Community Impact Guidelines were inspired by [Mozilla's code of conduct
|
||||
enforcement ladder](https://github.com/mozilla/diversity).
|
||||
|
||||
[homepage]: https://www.contributor-covenant.org
|
||||
|
||||
For answers to common questions about this code of conduct, see the FAQ at
|
||||
https://www.contributor-covenant.org/faq. Translations are available at
|
||||
https://www.contributor-covenant.org/translations.
|
||||
108
README.md
108
README.md
@@ -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 button font-weight to bold](#changing-the-button-font-weight-to-bold)
|
||||
- [Using predefined CSS classes](#using-predefined-css-classes)
|
||||
- [Accept on scroll](#accept-on-scroll)
|
||||
- [Flipping the buttons](#flipping-the-buttons)
|
||||
- [Extra cookie options](#extra-cookie-options)
|
||||
- [rainbows!](#rainbows)
|
||||
@@ -85,18 +84,12 @@ You can optionally set some props like this (next chapter will show all props):
|
||||
</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
|
||||
<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");
|
||||
}}
|
||||
></CookieConsent>
|
||||
```
|
||||
@@ -114,45 +107,45 @@ If the decline button is enabled then the (onDecline) prop function can be used,
|
||||
|
||||
## 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 |
|
||||
| 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 |
|
||||
|
||||
## Debugging it
|
||||
|
||||
@@ -180,7 +173,6 @@ When checking the cookie it'll do it in reverse. If the regular cookie exists, i
|
||||
|
||||
The long story can be found here: [pull-request#68](https://github.com/Mastermindzh/react-cookie-consent/pull/68)
|
||||
|
||||
|
||||
## 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".
|
||||
@@ -227,22 +219,6 @@ Which results in:
|
||||
|
||||
|
||||
|
||||
#### 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
|
||||
|
||||
If you enable the decline button you can pass along the "flipButtons" property to turn the buttons around:
|
||||
|
||||
2
build/index.d.ts
vendored
2
build/index.d.ts
vendored
@@ -39,6 +39,8 @@ export interface CookieConsentProps {
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
@@ -913,7 +913,9 @@ module.exports = /******/ (function (modules) {
|
||||
ButtonComponent = _props4.ButtonComponent,
|
||||
overlay = _props4.overlay,
|
||||
overlayClasses = _props4.overlayClasses,
|
||||
overlayStyle = _props4.overlayStyle;
|
||||
overlayStyle = _props4.overlayStyle,
|
||||
ariaAcceptLabel = _props4.ariaAcceptLabel,
|
||||
ariaDeclineLabel = _props4.ariaDeclineLabel;
|
||||
|
||||
var myStyle = {};
|
||||
var myButtonStyle = {};
|
||||
@@ -970,6 +972,7 @@ module.exports = /******/ (function (modules) {
|
||||
style: myDeclineButtonStyle,
|
||||
className: declineButtonClasses,
|
||||
id: declineButtonId,
|
||||
"aria-label": ariaDeclineLabel,
|
||||
onClick: function onClick() {
|
||||
_this2.decline();
|
||||
},
|
||||
@@ -987,6 +990,7 @@ module.exports = /******/ (function (modules) {
|
||||
style: myButtonStyle,
|
||||
className: buttonClasses,
|
||||
id: buttonId,
|
||||
"aria-label": ariaAcceptLabel,
|
||||
onClick: function onClick() {
|
||||
_this2.accept({ acceptedByScrolling: false });
|
||||
},
|
||||
@@ -1098,6 +1102,8 @@ module.exports = /******/ (function (modules) {
|
||||
overlay: _propTypes2.default.bool,
|
||||
overlayClasses: _propTypes2.default.string,
|
||||
overlayStyle: _propTypes2.default.object,
|
||||
ariaAcceptLabel: _propTypes2.default.string,
|
||||
ariaDeclineLabel: _propTypes2.default.string,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@@ -1137,6 +1143,8 @@ module.exports = /******/ (function (modules) {
|
||||
},
|
||||
overlay: false,
|
||||
overlayClasses: "",
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
};
|
||||
|
||||
exports.default = CookieConsent;
|
||||
|
||||
6321
package-lock.json
generated
Normal file
6321
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@@ -4,12 +4,13 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "5.1.3",
|
||||
"version": "5.2.0",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
"dependencies": {
|
||||
"js-cookie": "^2.2.1"
|
||||
"js-cookie": "^2.2.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1"
|
||||
@@ -41,28 +42,27 @@
|
||||
},
|
||||
"homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
|
||||
"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"
|
||||
},
|
||||
"prettier": "@mastermindzh/prettier-config",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
"pre-commit": "lint-staged --allow-empty"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
|
||||
14
src/index.d.ts
vendored
14
src/index.d.ts
vendored
@@ -12,7 +12,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
|
||||
onAccept?: () => void;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
declineButtonText?: Function | React.ReactNode;
|
||||
@@ -24,21 +24,21 @@ export interface CookieConsentProps {
|
||||
expires?: number;
|
||||
containerClasses?: string;
|
||||
contentClasses?: string;
|
||||
buttonWrapperClasses?: string,
|
||||
buttonWrapperClasses?: string;
|
||||
buttonClasses?: string;
|
||||
declineButtonClasses?: string;
|
||||
buttonId?: string;
|
||||
declineButtonId?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
extraCookieOptions?: object;
|
||||
disableButtonStyles?: boolean;
|
||||
enableDeclineButton?: boolean;
|
||||
flipButtons?: boolean;
|
||||
ButtonComponent?: React.ElementType;
|
||||
overlay?: boolean,
|
||||
overlayClasses?: string,
|
||||
overlayStyle?: object,
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
62
src/index.js
62
src/index.js
@@ -80,8 +80,6 @@ class CookieConsent extends Component {
|
||||
backgroundColor: "rgba(0,0,0,0.3)",
|
||||
},
|
||||
};
|
||||
|
||||
this.handleScroll = this.handleScroll.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@@ -90,52 +88,18 @@ class CookieConsent extends Component {
|
||||
// if cookie undefined or debug
|
||||
if (this.getCookieValue() === undefined || debug) {
|
||||
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;
|
||||
|
||||
this.setCookie(cookieName, cookieValue);
|
||||
|
||||
// fire onAccept
|
||||
onAccept({ acceptedByScrolling });
|
||||
|
||||
// remove listener if set
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
onAccept();
|
||||
|
||||
if (hideOnAccept) {
|
||||
this.setState({ visible: false });
|
||||
@@ -149,10 +113,8 @@ class CookieConsent extends Component {
|
||||
const {
|
||||
cookieName,
|
||||
declineCookieValue,
|
||||
expires,
|
||||
hideOnDecline,
|
||||
onDecline,
|
||||
extraCookieOptions,
|
||||
setDeclineCookie,
|
||||
} = this.props;
|
||||
|
||||
@@ -160,12 +122,8 @@ class CookieConsent extends Component {
|
||||
this.setCookie(cookieName, declineCookieValue);
|
||||
}
|
||||
|
||||
// fire onDecline
|
||||
onDecline();
|
||||
|
||||
// remove listener if set
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
|
||||
if (hideOnDecline) {
|
||||
this.setState({ visible: false });
|
||||
}
|
||||
@@ -249,6 +207,8 @@ class CookieConsent extends Component {
|
||||
overlay,
|
||||
overlayClasses,
|
||||
overlayStyle,
|
||||
ariaAcceptLabel,
|
||||
ariaDeclineLabel,
|
||||
} = this.props;
|
||||
|
||||
let myStyle = {};
|
||||
@@ -304,6 +264,7 @@ class CookieConsent extends Component {
|
||||
style={myDeclineButtonStyle}
|
||||
className={declineButtonClasses}
|
||||
id={declineButtonId}
|
||||
aria-label={ariaDeclineLabel}
|
||||
onClick={() => {
|
||||
this.decline();
|
||||
}}
|
||||
@@ -319,9 +280,8 @@ class CookieConsent extends Component {
|
||||
style={myButtonStyle}
|
||||
className={buttonClasses}
|
||||
id={buttonId}
|
||||
onClick={() => {
|
||||
this.accept({ acceptedByScrolling: false });
|
||||
}}
|
||||
aria-label={ariaAcceptLabel}
|
||||
onClick={this.accept}
|
||||
>
|
||||
{buttonText}
|
||||
</ButtonComponent>
|
||||
@@ -383,8 +343,6 @@ CookieConsent.propTypes = {
|
||||
declineButtonClasses: PropTypes.string,
|
||||
buttonId: PropTypes.string,
|
||||
declineButtonId: PropTypes.string,
|
||||
acceptOnScroll: PropTypes.bool,
|
||||
acceptOnScrollPercentage: PropTypes.number,
|
||||
extraCookieOptions: PropTypes.object,
|
||||
disableButtonStyles: PropTypes.bool,
|
||||
enableDeclineButton: PropTypes.bool,
|
||||
@@ -394,14 +352,14 @@ CookieConsent.propTypes = {
|
||||
overlay: PropTypes.bool,
|
||||
overlayClasses: PropTypes.string,
|
||||
overlayStyle: PropTypes.object,
|
||||
ariaAcceptLabel: PropTypes.string,
|
||||
ariaDeclineLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
disableStyles: false,
|
||||
hideOnAccept: true,
|
||||
hideOnDecline: true,
|
||||
acceptOnScroll: false,
|
||||
acceptOnScrollPercentage: 25,
|
||||
location: OPTIONS.BOTTOM,
|
||||
onAccept: () => {},
|
||||
onDecline: () => {},
|
||||
@@ -428,6 +386,8 @@ CookieConsent.defaultProps = {
|
||||
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
|
||||
overlay: false,
|
||||
overlayClasses: "",
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
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.
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
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" }] })],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user