mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-01-21 02:50:58 +01:00
Code Issues Projects Releases Wiki Activity

Improve debugging (#9)

Browse Source 
* Improve debugging
This commit is contained in:
Karl Anders 2018-05-31 19:51:48 +02:00 committed by Rick van Lieshout
parent 8bf481fe59
commit 456d5b4fa0
2 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -76,20 +76,23 @@ One of the props (onAccept) is a function, this function will be called after th
## Props ## Props
| Prop | Type | Default value | Description | | Prop | Type | Default value | Description |
|---------------|:--------------------------------:|---------------|-------------------------------------------------------------------------------------------------------| |---------------|:--------------------------------:|---------------|-------------------------------------------------------------------------------------------------------|
| location | String, either "top" or "bottom" | bottom | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. | | location | string, either "top" or "bottom" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. |
| 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) |
| buttonText | String or React component | I understand | Text to appear on the button | | 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. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| onAccept | function | () => {} | Function to be called after the accept button has been clicked. | | onAccept | function | `() => {}` | Function to be called after the accept button has been clicked. |
| style | Object | [look at source][style] | React styling object for the bar. | | style | object | [look at source][style] | React styling object for the bar. |
| buttonStyle | Object | [look at source][buttonStyle] | React styling object for the button. | | buttonStyle | object | [look at source][buttonStyle] | React styling object for the button. |
| contentStyle | Object | {} | React styling object for the content. | | contentStyle | object | [look at source][contentStyle] | React styling object for the content. |
| debug | boolean | undefined | Cookie is removed to debug styling. |
## Styling it ## Styling it
You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button". You can provide styling for the bar, the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children "content" and "button".
The styling behaves kind of responsive. The minimum content width has been chosen to be "300px" as a default value. If the button does not fit into the same line it is wrapped around into the next line.
You can style each component by using the `style`, `buttonStyle` and `contentStyle` prop. These will append / replace the default styles of the components. You can style each component by using the `style`, `buttonStyle` and `contentStyle` prop. These will append / replace the default styles of the components.
You can use `disableStyles={true}` to disable any built-in styling. You can use `disableStyles={true}` to disable any built-in styling.
@ -135,17 +138,17 @@ If you're crazy enough you can even make a rainbow colored bar:
## Debugging it ## Debugging it
Because the cookie consent bar will be hidden once accepted, you will have to remove the cookie if you want to evaluate changes: Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:
```js ```js
import CookieConsent, { Cookies } from "react-cookie-consent";
{Cookies.remove("myAwesomeCookieName2")}
<CookieConsent <CookieConsent
cookieName="myAwesomeCookieName2" debug={true}
> >
</CookieConsent> </CookieConsent>
``` ```
**Note:** Dont forget to remove the `debug`-property for production.
[style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L17-L28 [style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L17-L28
[buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L29-L38 [buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L29-L39
[contentStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L40-L43

17
src/index.js
View File

@ -19,9 +19,9 @@ class CookieConsent extends Component {
background: "#353535", background: "#353535",
color: "white", color: "white",
display: "flex", display: "flex",
flexWrap: "wrap"
justifyContent: "space-between", justifyContent: "space-between",
left: "0", left: "0",
padding: "15px",
position: "fixed", position: "fixed",
width: "100%", width: "100%",
zIndex: "999" zIndex: "999"
@ -35,16 +35,23 @@ class CookieConsent extends Component {
flex: "0 0 auto", flex: "0 0 auto",
marginLeft: "15px", marginLeft: "15px",
padding: "5px 10px", padding: "5px 10px",
marginRight: "25px" margin: "15px"
}, },
contentStyle: {} contentStyle: {
flex: "1 0 300px",
margin: "15px"
}
}; };
} }
componentWillMount() { componentWillMount() {
const { cookieName } = this.props; const { cookieName, debug } = this.props;
if (Cookies.get(cookieName) != undefined) { // debug not desired and cookieName not undefined
if (
!(debug !== undefined && debug) &&
Cookies.get(cookieName) !== undefined
) {
this.setState({ visible: false }); this.setState({ visible: false });
} }
} }