diff --git a/README.md b/README.md index 7d315a6..1b10ca3 100644 --- a/README.md +++ b/README.md @@ -111,42 +111,45 @@ If the decline button is enabled then the (onDecline) prop function can be used, ## 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. | -| 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) | -| 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 | -| 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 | `({ acceptedByScrolling }) => {}` | 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 | -| 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 | -| 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. | -| 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. | +| 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. | +| 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) | +| 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 | +| 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 | `({ acceptedByScrolling }) => {}` | 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. | ## Debugging it @@ -268,12 +271,30 @@ If you're crazy enough you can even make a rainbow colored bar: ``` +#### Overlay + +![overlay](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/overlay.png?raw=true) + +You can also generate a page-obfuscating overlay that will prevent actions other than interacting with the cookie consent button(s). + +```js + + This website uses cookies to enhance the user experience. + +``` + [style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L18-L29 [buttonstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L30-L40 [declinebuttonstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L41-L51 [contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55 +[overlaystyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L62-L69 ## contributor information diff --git a/images/overlay.png b/images/overlay.png new file mode 100644 index 0000000..099d726 Binary files /dev/null and b/images/overlay.png differ diff --git a/src/index.d.ts b/src/index.d.ts index ee0e1ad..0ee6536 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -35,6 +35,9 @@ export interface CookieConsentProps { enableDeclineButton?: boolean; flipButtons?: boolean; ButtonComponent?: React.ElementType; + overlay?: boolean, + overlayClasses?: string, + overlayStyle?: object, } export default class CookieConsent extends React.Component {} diff --git a/src/index.js b/src/index.js index 06760ed..b6405f1 100644 --- a/src/index.js +++ b/src/index.js @@ -59,6 +59,15 @@ class CookieConsent extends Component { flex: "1 0 300px", margin: "15px", }, + overlayStyle: { + position: "absolute", + left: 0, + top: 0, + width: "100%", + height: "100%", + zIndex: "999", + backgroundColor: "rgba(0,0,0,0.3)", + }, }; this.handleScroll = this.handleScroll.bind(this); @@ -226,12 +235,16 @@ class CookieConsent extends Component { enableDeclineButton, flipButtons, ButtonComponent, + overlay, + overlayClasses, + overlayStyle, } = this.props; let myStyle = {}; let myButtonStyle = {}; let myDeclineButtonStyle = {}; let myContentStyle = {}; + let myOverlayStyle = {}; if (disableStyles) { // if styles are disabled use the provided styles (or none) @@ -239,10 +252,12 @@ class CookieConsent extends Component { myButtonStyle = Object.assign({}, buttonStyle); myDeclineButtonStyle = Object.assign({}, declineButtonStyle); myContentStyle = Object.assign({}, contentStyle); + myOverlayStyle = Object.assign({}, overlayStyle); } else { // if styles aren't disabled merge them with the styles that are provided (or use default styles) myStyle = Object.assign({}, { ...this.state.style, ...style }); myContentStyle = Object.assign({}, { ...this.state.contentStyle, ...contentStyle }); + myOverlayStyle = Object.assign({}, { ...this.state.overlayStyle, ...overlayStyle }); // switch to disable JUST the button styles if (disableButtonStyles) { @@ -305,17 +320,23 @@ class CookieConsent extends Component { buttonsToRender.reverse(); } + const OverlayWrapper = !overlay + ? props => + : props =>
; + return ( -
-
- {this.props.children} + +
+
+ {this.props.children} +
+
+ {buttonsToRender.map(button => { + return button; + })} +
-
- {buttonsToRender.map((button) => { - return button; - })} -
-
+ ); } } @@ -356,6 +377,9 @@ CookieConsent.propTypes = { flipButtons: PropTypes.bool, ButtonComponent: PropTypes.elementType, cookieSecurity: PropTypes.bool, + overlay: PropTypes.bool, + overlayClasses: PropTypes.string, + overlayStyle: PropTypes.object, }; CookieConsent.defaultProps = { @@ -388,6 +412,8 @@ CookieConsent.defaultProps = { flipButtons: false, sameSite: SAME_SITE_OPTIONS.NONE, ButtonComponent: ({ children, ...props }) => , + overlay: false, + overlayClasses: "", }; export default CookieConsent;