mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-01-20 18:41:44 +01:00
implemented issue #15
This commit is contained in:
parent
f8ef6ca218
commit
d601613b5a
59
README.md
59
README.md
@ -83,11 +83,29 @@ One of the props (onAccept) is a function, this function will be called after th
|
||||
| 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. |
|
||||
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
| 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 |
|
||||
| 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 | Bar will be drawn regardless of cookie for debugging purposes. |
|
||||
| expires | number | 365 | Number of days before the cookie expires. |
|
||||
|
||||
|
||||
## Debugging it
|
||||
|
||||
Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
debug={true}
|
||||
>
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
**Note:** Dont forget to remove the `debug`-property for production.
|
||||
|
||||
|
||||
## Styling it
|
||||
|
||||
@ -96,6 +114,7 @@ You can provide styling for the bar, the button and the content. Note that the b
|
||||
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.
|
||||
Alternatively you can provide CSS classnames as `containerClasses`, `buttonClasses` and `contentClasses` to apply predefined CSS classes.
|
||||
|
||||
You can use `disableStyles={true}` to disable any built-in styling.
|
||||
|
||||
@ -118,6 +137,28 @@ You can use `disableStyles={true}` to disable any built-in styling.
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
#### Using predefined CSS classes
|
||||
You can pass predefined CSS classes to the components using the `containerClasses`, `buttonClasses` and `contentClasses` props. The example below uses bootstrap classes:
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
disableStyles={true}
|
||||
location={OPTIONS.BOTTOM}
|
||||
buttonClasses="btn btn-primary"
|
||||
containerClasses="alert alert-warning col-lg-12"
|
||||
contentClasses="text-capitalize"
|
||||
>
|
||||
This website uses cookies to enhance the user experience.{" "}
|
||||
<span style={{ fontSize: "10px" }}>
|
||||
This bit of text is smaller :O
|
||||
</span>
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
Which results in:
|
||||
|
||||
|
||||
|
||||
#### rainbows!
|
||||
|
||||
|
||||
@ -138,19 +179,7 @@ If you're crazy enough you can even make a rainbow colored bar:
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
## Debugging it
|
||||
|
||||
Because the cookie consent bar will be hidden once accepted, you will have to set the prop `debug={true}` to evaluate styling changes:
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
debug={true}
|
||||
>
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
**Note:** Dont forget to remove the `debug`-property for production.
|
||||
|
||||
<!-- links -->
|
||||
[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
|
||||
[contentStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L39-L42
|
||||
|
||||
@ -792,7 +792,10 @@ var CookieConsent = function (_Component) {
|
||||
contentStyle = _props3.contentStyle,
|
||||
disableStyles = _props3.disableStyles,
|
||||
onAccept = _props3.onAccept,
|
||||
buttonText = _props3.buttonText;
|
||||
buttonText = _props3.buttonText,
|
||||
containerClasses = _props3.containerClasses,
|
||||
contentClasses = _props3.contentClasses,
|
||||
buttonClasses = _props3.buttonClasses;
|
||||
|
||||
|
||||
var myStyle = {};
|
||||
@ -815,25 +818,28 @@ var CookieConsent = function (_Component) {
|
||||
switch (location) {
|
||||
case OPTIONS.TOP:
|
||||
myStyle.top = "0";
|
||||
myStyle.position = "fixed";
|
||||
break;
|
||||
|
||||
case OPTIONS.BOTTOM:
|
||||
myStyle.bottom = "0";
|
||||
myStyle.position = "fixed";
|
||||
break;
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
"div",
|
||||
{ className: "cookieConsent", style: myStyle },
|
||||
{ className: "cookieConsent " + containerClasses, style: myStyle },
|
||||
_react2.default.createElement(
|
||||
"div",
|
||||
{ style: myContentStyle },
|
||||
{ style: myContentStyle, className: contentClasses },
|
||||
this.props.children
|
||||
),
|
||||
_react2.default.createElement(
|
||||
"button",
|
||||
{
|
||||
style: myButtonStyle,
|
||||
className: buttonClasses,
|
||||
onClick: function onClick() {
|
||||
_this2.accept();
|
||||
onAccept();
|
||||
@ -859,7 +865,10 @@ CookieConsent.propTypes = {
|
||||
buttonText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.element]),
|
||||
cookieName: _propTypes2.default.string,
|
||||
debug: _propTypes2.default.bool,
|
||||
expires: _propTypes2.default.number
|
||||
expires: _propTypes2.default.number,
|
||||
containerClasses: _propTypes2.default.string,
|
||||
contentClasses: _propTypes2.default.string,
|
||||
buttonClasses: _propTypes2.default.string
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@ -869,7 +878,10 @@ CookieConsent.defaultProps = {
|
||||
cookieName: "CookieConsent",
|
||||
buttonText: "I understand",
|
||||
debug: false,
|
||||
expires: 365
|
||||
expires: 365,
|
||||
containerClasses: "",
|
||||
contentClasses: "",
|
||||
buttonClasses: ""
|
||||
};
|
||||
|
||||
exports.default = CookieConsent;
|
||||
|
||||
BIN
images/css_classes.png
Normal file
BIN
images/css_classes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -4,7 +4,7 @@
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "1.2.0",
|
||||
"version": "1.3.0",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"dependencies": {
|
||||
|
||||
24
src/index.js
24
src/index.js
@ -75,7 +75,10 @@ class CookieConsent extends Component {
|
||||
contentStyle,
|
||||
disableStyles,
|
||||
onAccept,
|
||||
buttonText
|
||||
buttonText,
|
||||
containerClasses,
|
||||
contentClasses,
|
||||
buttonClasses
|
||||
} = this.props;
|
||||
|
||||
let myStyle = {};
|
||||
@ -98,18 +101,23 @@ class CookieConsent extends Component {
|
||||
switch (location) {
|
||||
case OPTIONS.TOP:
|
||||
myStyle.top = "0";
|
||||
myStyle.position = "fixed";
|
||||
break;
|
||||
|
||||
case OPTIONS.BOTTOM:
|
||||
myStyle.bottom = "0";
|
||||
myStyle.position = "fixed";
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cookieConsent" style={myStyle}>
|
||||
<div style={myContentStyle}>{this.props.children}</div>
|
||||
<div className={`cookieConsent ${containerClasses}`} style={myStyle}>
|
||||
<div style={myContentStyle} className={contentClasses}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<button
|
||||
style={myButtonStyle}
|
||||
className={buttonClasses}
|
||||
onClick={() => {
|
||||
this.accept();
|
||||
onAccept();
|
||||
@ -133,7 +141,10 @@ CookieConsent.propTypes = {
|
||||
buttonText: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
|
||||
cookieName: PropTypes.string,
|
||||
debug: PropTypes.bool,
|
||||
expires: PropTypes.number
|
||||
expires: PropTypes.number,
|
||||
containerClasses: PropTypes.string,
|
||||
contentClasses: PropTypes.string,
|
||||
buttonClasses: PropTypes.string
|
||||
};
|
||||
|
||||
CookieConsent.defaultProps = {
|
||||
@ -143,7 +154,10 @@ CookieConsent.defaultProps = {
|
||||
cookieName: "CookieConsent",
|
||||
buttonText: "I understand",
|
||||
debug: false,
|
||||
expires: 365
|
||||
expires: 365,
|
||||
containerClasses:"",
|
||||
contentClasses:"",
|
||||
buttonClasses:""
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user