mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-11-04 02:38:50 +01:00
Compare commits
8 Commits
7.4.1
...
c6799ea446
| Author | SHA1 | Date | |
|---|---|---|---|
| c6799ea446 | |||
| d7fce12ea4 | |||
|
d05509bf04 | ||
|
a7ce2de923 | ||
| d8993bead2 | |||
| ecb5f30a7c | |||
|
|
d1c7252546 | ||
| 602a9bfe62 |
12
CHANGELOG.md
12
CHANGELOG.md
@@ -5,6 +5,18 @@ 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.6.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0]
|
||||
|
||||
- Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div
|
||||
|
||||
## [[7.5.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.5.0)
|
||||
|
||||
- Added `customDeclineButtonProps` to add custom properties to the decline button
|
||||
|
||||
## [[7.4.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.1)
|
||||
|
||||
- Small version error in package.json that actually didn't make it work with React 18
|
||||
|
||||
## [[7.4.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.0)
|
||||
|
||||
- Added support for React 18
|
||||
|
||||
96
README.md
96
README.md
@@ -137,53 +137,55 @@ 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| customButtonWrapperAttributes | `React.HTMLAttributes<HTMLDivElement>` | `{}` | Allows you to set custom (data) attributes on the button wrapper div |
|
||||
| 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 |
|
||||
| customDeclineButtonProps | object | `{}` | Allows you to set custom props on the decline button component |
|
||||
|
||||
## Debugging it
|
||||
|
||||
|
||||
2
build/index.d.ts
vendored
2
build/index.d.ts
vendored
@@ -48,6 +48,8 @@ export interface CookieConsentProps {
|
||||
customContentAttributes?: object;
|
||||
customContainerAttributes?: object;
|
||||
customButtonProps?: object;
|
||||
customDeclineButtonProps?: object;
|
||||
customButtonWrapperAttributes?: React.HTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
example
2
example
Submodule example updated: bff8dd76c5...8f1152c04d
151
package-lock.json
generated
151
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "react-cookie-consent",
|
||||
"version": "7.4.0",
|
||||
"version": "7.6.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "react-cookie-consent",
|
||||
"version": "7.4.0",
|
||||
"version": "7.6.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-cookie": "^2.2.1",
|
||||
@@ -31,7 +31,7 @@
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 | ^18.0.0"
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@@ -1690,6 +1690,20 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
|
||||
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.0.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
|
||||
@@ -1699,6 +1713,25 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/set-array": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
|
||||
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/source-map": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
|
||||
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.0",
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
|
||||
@@ -1706,9 +1739,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
|
||||
"integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
|
||||
"version": "0.3.14",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
|
||||
"integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.0.3",
|
||||
@@ -2021,9 +2054,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
|
||||
"integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
|
||||
"version": "8.7.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
|
||||
"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
@@ -5014,9 +5047,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/semver-regex": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.3.tgz",
|
||||
"integrity": "sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==",
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.4.tgz",
|
||||
"integrity": "sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@@ -5154,9 +5187,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.19",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
|
||||
"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
@@ -5281,14 +5314,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
|
||||
"integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
|
||||
"version": "5.14.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
|
||||
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.2",
|
||||
"acorn": "^8.5.0",
|
||||
"commander": "^2.20.0",
|
||||
"source-map": "~0.7.2",
|
||||
"source-map-support": "~0.5.19"
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
"bin": {
|
||||
"terser": "bin/terser"
|
||||
@@ -5363,15 +5397,6 @@
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/terser/node_modules/source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
|
||||
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
@@ -6950,12 +6975,39 @@
|
||||
"integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
|
||||
"dev": true
|
||||
},
|
||||
"@jridgewell/gen-mapping": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
|
||||
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jridgewell/set-array": "^1.0.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
}
|
||||
},
|
||||
"@jridgewell/resolve-uri": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
|
||||
"integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
|
||||
"dev": true
|
||||
},
|
||||
"@jridgewell/set-array": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
|
||||
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
|
||||
"dev": true
|
||||
},
|
||||
"@jridgewell/source-map": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
|
||||
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jridgewell/gen-mapping": "^0.3.0",
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
}
|
||||
},
|
||||
"@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
|
||||
@@ -6963,9 +7015,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@jridgewell/trace-mapping": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
|
||||
"integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
|
||||
"version": "0.3.14",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
|
||||
"integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jridgewell/resolve-uri": "^3.0.3",
|
||||
@@ -7253,9 +7305,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
|
||||
"integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
|
||||
"version": "8.7.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
|
||||
"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-import-assertions": {
|
||||
@@ -9459,9 +9511,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"semver-regex": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.3.tgz",
|
||||
"integrity": "sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==",
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.4.tgz",
|
||||
"integrity": "sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==",
|
||||
"dev": true
|
||||
},
|
||||
"serialize-javascript": {
|
||||
@@ -9567,9 +9619,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"source-map-support": {
|
||||
"version": "0.5.19",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
|
||||
"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"buffer-from": "^1.0.0",
|
||||
@@ -9666,14 +9718,15 @@
|
||||
}
|
||||
},
|
||||
"terser": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
|
||||
"integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
|
||||
"version": "5.14.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
|
||||
"integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jridgewell/source-map": "^0.3.2",
|
||||
"acorn": "^8.5.0",
|
||||
"commander": "^2.20.0",
|
||||
"source-map": "~0.7.2",
|
||||
"source-map-support": "~0.5.19"
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
"dependencies": {
|
||||
"commander": {
|
||||
@@ -9681,12 +9734,6 @@
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
|
||||
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "7.4.0",
|
||||
"version": "7.6.0",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
@@ -13,7 +13,7 @@
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1 || ^17.0.0 | ^18.0.0"
|
||||
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
|
||||
2
src/index.d.ts
vendored
2
src/index.d.ts
vendored
@@ -48,6 +48,8 @@ export interface CookieConsentProps {
|
||||
customContentAttributes?: object;
|
||||
customContainerAttributes?: object;
|
||||
customButtonProps?: object;
|
||||
customDeclineButtonProps?: object;
|
||||
customButtonWrapperAttributes?: React.HTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}
|
||||
|
||||
11
src/index.js
11
src/index.js
@@ -293,6 +293,8 @@ class CookieConsent extends Component {
|
||||
customContainerAttributes,
|
||||
customContentAttributes,
|
||||
customButtonProps,
|
||||
customDeclineButtonProps,
|
||||
customButtonWrapperAttributes,
|
||||
} = this.props;
|
||||
|
||||
let myStyle = {};
|
||||
@@ -352,6 +354,7 @@ class CookieConsent extends Component {
|
||||
onClick={() => {
|
||||
this.decline();
|
||||
}}
|
||||
{...customDeclineButtonProps}
|
||||
>
|
||||
{declineButtonText}
|
||||
</ButtonComponent>
|
||||
@@ -360,7 +363,6 @@ class CookieConsent extends Component {
|
||||
// add accept button
|
||||
buttonsToRender.push(
|
||||
<ButtonComponent
|
||||
{...customButtonProps}
|
||||
key="acceptButton"
|
||||
style={myButtonStyle}
|
||||
className={buttonClasses}
|
||||
@@ -369,6 +371,7 @@ class CookieConsent extends Component {
|
||||
onClick={() => {
|
||||
this.accept();
|
||||
}}
|
||||
{...customButtonProps}
|
||||
>
|
||||
{buttonText}
|
||||
</ButtonComponent>
|
||||
@@ -397,7 +400,7 @@ class CookieConsent extends Component {
|
||||
<div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<div className={`${buttonWrapperClasses}`}>
|
||||
<div className={`${buttonWrapperClasses}`} {...customButtonWrapperAttributes}>
|
||||
{buttonsToRender.map((button) => {
|
||||
return button;
|
||||
})}
|
||||
@@ -455,6 +458,8 @@ CookieConsent.propTypes = {
|
||||
customContentAttributes: PropTypes.object,
|
||||
customContainerAttributes: PropTypes.object,
|
||||
customButtonProps: PropTypes.object,
|
||||
customDeclineButtonProps: PropTypes.object,
|
||||
customButtonWrapperAttributes: PropTypes.object,
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@@ -497,6 +502,8 @@ CookieConsent.defaultProps = {
|
||||
customContentAttributes: {},
|
||||
customContainerAttributes: {},
|
||||
customButtonProps: {},
|
||||
customDeclineButtonProps: {},
|
||||
customButtonWrapperAttributes: {},
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
|
||||
Reference in New Issue
Block a user