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

Update cookie value (#125)

Browse Source 
* Chore: resetCookieConsentValue function

* Chore: VISIBLE_OPTIONS enum & render update in order to use it

* Readme review
This commit is contained in:
Situ 2021-09-17 18:22:12 +02:00 committed by GitHub
parent 239001cb19
commit c3ba87e62f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -123,11 +123,24 @@ import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-cons
console.log(getCookieConsentValue()); console.log(getCookieConsentValue());
``` ```
### reset the cookies value in your own code
react-cookie-consent exports a function called `resetCookieConsentValue`. You can use it in order to remove cookie in client-site:
```js
import CookieConsent, { Cookies, resetCookieConsentValue } from "react-cookie-consent";
console.log(resetCookieConsentValue());
```
That option would be interesting if you want to allow user to change their consent. If you want to show again the consent bar, you must force "visible" prop to show again the bar.
## 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. |
| 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 | | 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) |
@ -161,7 +174,7 @@ console.log(getCookieConsentValue());
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. | | ButtonComponent | React component | button | React Component to render as a button. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | | sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | | 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 | | ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline 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) | | acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |

25
src/index.js
View File

@ -14,6 +14,12 @@ export const SAME_SITE_OPTIONS = {
NONE: "none", NONE: "none",
}; };
export const VISIBLE_OPTIONS = {
HIDDEN: 'hidden',
SHOW: 'show',
BY_COOKIE_VALUE: 'byCookieValue'
}
/** /**
* Returns the value of the consent cookie * Returns the value of the consent cookie
* Retrieves the regular value first and if not found the legacy one according * Retrieves the regular value first and if not found the legacy one according
@ -30,6 +36,15 @@ export const getCookieConsentValue = (name = defaultCookieConsentName) => {
return cookieValue; return cookieValue;
}; };
/**
* Reset the consent cookie
* Remove the cookie on browser in order to allow user to change their consent
* @param {*} name optional name of the cookie
*/
export const resetCookieConsentValue = (name = defaultCookieConsentName) => {
Cookies.remove(name);
};
/** /**
* Get the legacy cookie name by the regular cookie name * Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get * @param {string} name of cookie to get
@ -227,9 +242,17 @@ class CookieConsent extends Component {
render() { render() {
// If the bar shouldn't be visible don't render anything. // If the bar shouldn't be visible don't render anything.
switch (this.props.visible) {
case VISIBLE_OPTIONS.HIDDEN:
return null;
case VISIBLE_OPTIONS.BY_COOKIE_VALUE:
if (!this.state.visible) { if (!this.state.visible) {
return null; return null;
} }
break;
default:
break;
}
const { const {
location, location,
@ -366,6 +389,7 @@ class CookieConsent extends Component {
CookieConsent.propTypes = { CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])), location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
visible: PropTypes.oneOf(Object.keys(VISIBLE_OPTIONS).map((key) => VISIBLE_OPTIONS[key])),
sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])), sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])),
style: PropTypes.object, style: PropTypes.object,
buttonStyle: PropTypes.object, buttonStyle: PropTypes.object,
@ -412,6 +436,7 @@ CookieConsent.defaultProps = {
hideOnAccept: true, hideOnAccept: true,
hideOnDecline: true, hideOnDecline: true,
location: OPTIONS.BOTTOM, location: OPTIONS.BOTTOM,
visible: VISIBLE_OPTIONS.BY_COOKIE_VALUE,
onAccept: () => {}, onAccept: () => {},
onDecline: () => {}, onDecline: () => {},
cookieName: defaultCookieConsentName, cookieName: defaultCookieConsentName,