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 (
-