mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-08-23 09:35:04 +02:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
541194819b | ||
| 91d86af611 | |||
|
413abc7fd8 | ||
| 2a1e52b24a |
1
.prettierignore
Normal file
1
.prettierignore
Normal file
@@ -0,0 +1 @@
|
||||
build/*
|
||||
16
CHANGELOG.md
16
CHANGELOG.md
@@ -5,7 +5,21 @@ 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).
|
||||
|
||||
## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.0)
|
||||
## [next]
|
||||
|
||||
- added `customButtonProps` that allows to use custom props with the button component. Specifically useful for library buttons components, for e.g. MUI Button.
|
||||
|
||||
## [[7.2.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.1)
|
||||
|
||||
- hideOnDecline added to typescript files
|
||||
- Added .prettieringore
|
||||
|
||||
## [[7.2.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.0)
|
||||
|
||||
- Added `onOverlayClick` which allows you to react to a click on the overlay
|
||||
- Added `acceptOnOverlayClick` which accepts the cookies when the overlay is clicked and runs `onOverlayClick`
|
||||
|
||||
## [[7.1.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.1.1)
|
||||
|
||||
- `customContentAttributes` and `customContainerAttributes` are now optional in the typing file as they should be
|
||||
|
||||
|
||||
91
README.md
91
README.md
@@ -137,50 +137,53 @@ That option would be interesting if you want to allow user to change their conse
|
||||
|
||||
## 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. |
|
||||
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div |
|
||||
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
|
||||
| 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. |
|
||||
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| customContentAttributes | object | `{}` | Allows you to set custom (data) attributes on the content div |
|
||||
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
|
||||
| onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
|
||||
| acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay |
|
||||
| customButtonProps | object | `{}` | Allows you to set custom props on the button component |
|
||||
|
||||
## Debugging it
|
||||
|
||||
|
||||
3
build/index.d.ts
vendored
3
build/index.d.ts
vendored
@@ -13,6 +13,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
hideOnDecline?: boolean;
|
||||
onAccept?: (acceptedByScrolling?: boolean) => void;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
@@ -38,6 +39,8 @@ export interface CookieConsentProps {
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
onOverlayClick?: () => void;
|
||||
acceptOnOverlayClick?: boolean;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
|
||||
768
build/index.js
768
build/index.js
File diff suppressed because one or more lines are too long
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "react-cookie-consent",
|
||||
"version": "7.1.1",
|
||||
"version": "7.2.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "7.1.0",
|
||||
"version": "7.2.1",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-cookie": "^2.2.1",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "7.1.1",
|
||||
"version": "7.2.1",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
|
||||
4
src/index.d.ts
vendored
4
src/index.d.ts
vendored
@@ -13,6 +13,7 @@ export interface CookieConsentProps {
|
||||
children?: React.ReactNode;
|
||||
disableStyles?: boolean;
|
||||
hideOnAccept?: boolean;
|
||||
hideOnDecline?: boolean;
|
||||
onAccept?: (acceptedByScrolling?: boolean) => void;
|
||||
onDecline?: Function;
|
||||
buttonText?: Function | React.ReactNode;
|
||||
@@ -38,12 +39,15 @@ export interface CookieConsentProps {
|
||||
overlay?: boolean;
|
||||
overlayClasses?: string;
|
||||
overlayStyle?: object;
|
||||
onOverlayClick?: () => void;
|
||||
acceptOnOverlayClick?: boolean;
|
||||
ariaAcceptLabel?: string;
|
||||
ariaDeclineLabel?: string;
|
||||
acceptOnScroll?: boolean;
|
||||
acceptOnScrollPercentage?: number;
|
||||
customContentAttributes?: object;
|
||||
customContainerAttributes?: object;
|
||||
customButtonProps?: object;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
27
src/index.js
27
src/index.js
@@ -159,6 +159,17 @@ class CookieConsent extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a click on the overlay
|
||||
*/
|
||||
overlayClick() {
|
||||
const { acceptOnOverlayClick, onOverlayClick } = this.props;
|
||||
if (acceptOnOverlayClick) {
|
||||
this.accept();
|
||||
}
|
||||
onOverlayClick();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a persistent decline cookie
|
||||
*/
|
||||
@@ -281,6 +292,7 @@ class CookieConsent extends Component {
|
||||
ariaDeclineLabel,
|
||||
customContainerAttributes,
|
||||
customContentAttributes,
|
||||
customButtonProps,
|
||||
} = this.props;
|
||||
|
||||
let myStyle = {};
|
||||
@@ -348,6 +360,7 @@ class CookieConsent extends Component {
|
||||
// add accept button
|
||||
buttonsToRender.push(
|
||||
<ButtonComponent
|
||||
{...customButtonProps}
|
||||
key="acceptButton"
|
||||
style={myButtonStyle}
|
||||
className={buttonClasses}
|
||||
@@ -369,7 +382,13 @@ class CookieConsent extends Component {
|
||||
<ConditionalWrapper
|
||||
condition={overlay}
|
||||
wrapper={(children) => (
|
||||
<div style={myOverlayStyle} className={overlayClasses}>
|
||||
<div
|
||||
style={myOverlayStyle}
|
||||
className={overlayClasses}
|
||||
onClick={() => {
|
||||
this.overlayClick();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
@@ -427,12 +446,15 @@ CookieConsent.propTypes = {
|
||||
overlay: PropTypes.bool,
|
||||
overlayClasses: PropTypes.string,
|
||||
overlayStyle: PropTypes.object,
|
||||
onOverlayClick: PropTypes.func,
|
||||
acceptOnOverlayClick: PropTypes.bool,
|
||||
ariaAcceptLabel: PropTypes.string,
|
||||
ariaDeclineLabel: PropTypes.string,
|
||||
acceptOnScroll: PropTypes.bool,
|
||||
acceptOnScrollPercentage: PropTypes.number,
|
||||
customContentAttributes: PropTypes.object,
|
||||
customContainerAttributes: PropTypes.object,
|
||||
customButtonProps: PropTypes.object,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@@ -466,12 +488,15 @@ CookieConsent.defaultProps = {
|
||||
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
|
||||
overlay: false,
|
||||
overlayClasses: "",
|
||||
onOverlayClick: () => {},
|
||||
acceptOnOverlayClick: false,
|
||||
ariaAcceptLabel: "Accept cookies",
|
||||
ariaDeclineLabel: "Decline cookies",
|
||||
acceptOnScroll: false,
|
||||
acceptOnScrollPercentage: 25,
|
||||
customContentAttributes: {},
|
||||
customContainerAttributes: {},
|
||||
customButtonProps: {},
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
|
||||
Reference in New Issue
Block a user