mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02: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
| 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. |
| children | String or React component | | Content to appear inside the bar |
| 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 |
| 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 |
| 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. |
| style | Object | [look at source][style] | React styling object for the bar. |
| buttonStyle | Object | [look at source][buttonStyle] | React styling object for the button. |
| contentStyle | Object | {} | React styling object for the content. |
| 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. |
| 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. |
| buttonStyle | object | [look at source][buttonStyle] | React styling object for the button. |
| contentStyle | object | [look at source][contentStyle] | React styling object for the content. |
| debug | boolean | undefined | Cookie is removed to debug styling. |
## 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".
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 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
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
import CookieConsent, { Cookies } from "react-cookie-consent";
{Cookies.remove("myAwesomeCookieName2")}
<CookieConsent
cookieName="myAwesomeCookieName2"
debug={true}
>
</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
[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",
color: "white",
display: "flex",
flexWrap: "wrap"
justifyContent: "space-between",
left: "0",
padding: "15px",
position: "fixed",
width: "100%",
zIndex: "999"
@ -35,16 +35,23 @@ class CookieConsent extends Component {
flex: "0 0 auto",
marginLeft: "15px",
padding: "5px 10px",
marginRight: "25px"
margin: "15px"
},
contentStyle: {}
contentStyle: {
flex: "1 0 300px",
margin: "15px"
}
};
}
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 });
}
}