Adding a cookieValue prop (#24)

The PR will:
* Add a new prop, `cookieValue`, to component and the README. This prop let's you defined the value of the cookie, instead of always defining the hardcoded value of `true`. This is useful when integrating cookies with other cookie consent banners which need to check the same cookie value. For example we use another consent banner along side this one (on a different sub-domain) which checks that the consent cookie is set to `allowed`. 
* Tidying up the props table spacing in the README file
* Remove a few trailing white-spaces after component names and prop definition.
This commit is contained in:
Jo Wo 2018-09-27 15:22:13 +01:00 committed by Rick van Lieshout
parent b3d5470d8c
commit c5a2632ea3
2 changed files with 13 additions and 6 deletions

View File

@ -85,6 +85,7 @@ One of the props (onAccept) is a function, this function will be called after th
| 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 |
| 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. |
| onAccept | function | `() => {}` | Function to be called after the accept 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. |
@ -168,9 +169,9 @@ Which results in:
You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage.
```js
<CookieConsent
acceptOnScroll={true}
acceptOnScrollPercentage={50}
<CookieConsent
acceptOnScroll={true}
acceptOnScrollPercentage={50}
onAccept={() => {alert("consent given")}}
>
Hello scroller :)
@ -181,7 +182,7 @@ You can make the cookiebar disappear after scrolling a certain percentage using
You can add more cookie options using the extraCookieOptions parameter like so:
```js
<CookieConsent
<CookieConsent
extraCookieOptions={{domain: 'myexample.com'}}
>
cookie bar

View File

@ -89,14 +89,14 @@ class CookieConsent extends Component {
* Set a persistent cookie
*/
accept() {
const { cookieName, expires, hideOnAccept, onAccept, extraCookieOptions } = this.props;
const { cookieName, cookieValue, expires, hideOnAccept, onAccept, extraCookieOptions } = this.props;
// fire onAccept
onAccept();
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
Cookies.set(cookieName, true, { expires: expires, ...extraCookieOptions });
Cookies.set(cookieName, cookieValue, { expires: expires, ...extraCookieOptions });
if (hideOnAccept) {
this.setState({ visible: false });
@ -184,6 +184,11 @@ CookieConsent.propTypes = {
PropTypes.element
]),
cookieName: PropTypes.string,
cookieValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.number
]),
debug: PropTypes.bool,
expires: PropTypes.number,
containerClasses: PropTypes.string,
@ -202,6 +207,7 @@ CookieConsent.defaultProps = {
location: OPTIONS.BOTTOM,
onAccept: () => { },
cookieName: "CookieConsent",
cookieValue: true,
buttonText: "I understand",
debug: false,
expires: 365,