diff --git a/README.md b/README.md index 1ae9108..5d71a1c 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ One of the props (onAccept) is a function, this function will be called after th | 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. | +| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie| | containerClasses| string | "" | CSS classes to apply to the surrounding container | | buttonClasses | string | "" | CSS classes to apply to the button | | contentClasses| string | "" | CSS classes to apply to the content | @@ -162,6 +163,31 @@ Which results in: ![bootstrap styling](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/css_classes.png?raw=true) + +#### Accept on scroll +You can make the cookiebar disappear after scrolling a certain percentage using acceptOnScroll and acceptOnScrollPercentage. + +```js + {alert("consent given")}} +> + Hello scroller :) + +``` + +#### Extra cookie options +You can add more cookie options using the extraCookieOptions parameter like so: + +```js + + cookie bar + +``` + #### rainbows! ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true) diff --git a/build/index.js b/build/index.js index d472a49..3d3decb 100644 --- a/build/index.js +++ b/build/index.js @@ -634,7 +634,8 @@ var CookieConsent = function (_Component) { cookieName = _props2.cookieName, expires = _props2.expires, hideOnAccept = _props2.hideOnAccept, - onAccept = _props2.onAccept; + onAccept = _props2.onAccept, + extraCookieOptions = _props2.extraCookieOptions; // fire onAccept @@ -642,7 +643,8 @@ var CookieConsent = function (_Component) { // remove listener if set window.removeEventListener("scroll", this.handleScroll); - _jsCookie2.default.set(cookieName, true, { expires: expires }); + _jsCookie2.default.set(cookieName, true, _extends({ expires: expires }, extraCookieOptions)); + if (hideOnAccept) { this.setState({ visible: false }); } @@ -743,7 +745,8 @@ CookieConsent.propTypes = { contentClasses: _propTypes2.default.string, buttonClasses: _propTypes2.default.string, acceptOnScroll: _propTypes2.default.bool, - acceptOnScrollPercentage: _propTypes2.default.number + acceptOnScrollPercentage: _propTypes2.default.number, + extraCookieOptions: _propTypes2.default.object }; CookieConsent.defaultProps = { @@ -759,7 +762,8 @@ CookieConsent.defaultProps = { expires: 365, containerClasses: "", contentClasses: "", - buttonClasses: "" + buttonClasses: "", + extraCookieOptions: {} }; exports.default = CookieConsent; diff --git a/src/index.js b/src/index.js index 0dbbf51..3ba2808 100644 --- a/src/index.js +++ b/src/index.js @@ -89,14 +89,15 @@ class CookieConsent extends Component { * Set a persistent cookie */ accept() { - const { cookieName, expires, hideOnAccept, onAccept } = this.props; + const { cookieName, expires, hideOnAccept, onAccept, extraCookieOptions } = this.props; // fire onAccept onAccept(); // remove listener if set window.removeEventListener("scroll", this.handleScroll); - Cookies.set(cookieName, true, { expires: expires }); + Cookies.set(cookieName, true, { expires: expires, ...extraCookieOptions }); + if (hideOnAccept) { this.setState({ visible: false }); } @@ -189,7 +190,8 @@ CookieConsent.propTypes = { contentClasses: PropTypes.string, buttonClasses: PropTypes.string, acceptOnScroll: PropTypes.bool, - acceptOnScrollPercentage: PropTypes.number + acceptOnScrollPercentage: PropTypes.number, + extraCookieOptions: PropTypes.object }; CookieConsent.defaultProps = { @@ -198,14 +200,15 @@ CookieConsent.defaultProps = { acceptOnScroll: false, acceptOnScrollPercentage: 25, location: OPTIONS.BOTTOM, - onAccept: () => {}, + onAccept: () => { }, cookieName: "CookieConsent", buttonText: "I understand", debug: false, expires: 365, containerClasses: "", contentClasses: "", - buttonClasses: "" + buttonClasses: "", + extraCookieOptions: {} }; export default CookieConsent;