react-cookie-consent - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

build/index.js

@@ -795,3 +795,6 @@ module.exports =
           onAccept = _props3.onAccept,
-          buttonText = _props3.buttonText;
+          buttonText = _props3.buttonText,
+          containerClasses = _props3.containerClasses,
+          contentClasses = _props3.contentClasses,
+          buttonClasses = _props3.buttonClasses;
 
@@ -819,2 +822,3 @@
           myStyle.top = "0";
+          myStyle.position = "fixed";
           break;
@@ -824,2 +828,3 @@
           myStyle.bottom = "0";
+          myStyle.position = "fixed";
           break;
@@ -830,6 +835,6 @@ }
         "div",
-        { className: "cookieConsent", style: myStyle },
+        { className: "cookieConsent " + containerClasses, style: myStyle },
         _react2.default.createElement(
           "div",
-          { style: myContentStyle },
+          { style: myContentStyle, className: contentClasses },
           this.props.children
@@ -841,2 +846,3 @@ ),
             style: myButtonStyle,
+            className: buttonClasses,
             onClick: function onClick() {
@@ -867,3 +873,6 @@ _this2.accept();
   debug: _propTypes2.default.bool,
-  expires: _propTypes2.default.number
+  expires: _propTypes2.default.number,
+  containerClasses: _propTypes2.default.string,
+  contentClasses: _propTypes2.default.string,
+  buttonClasses: _propTypes2.default.string
 };
@@ -878,3 +887,6 @@
   debug: false,
-  expires: 365
+  expires: 365,
+  containerClasses: "",
+  contentClasses: "",
+  buttonClasses: ""
 };
@@ -881,0 +893,0 @@

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
@@ -10,0 +10,0 @@ "main": "build/index.js",

README.md

@@ -86,8 +86,26 @@ # :cookie: react-cookie-consent :cookie:
 | 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
@@ -100,2 +118,3 @@
 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.
 
@@ -123,2 +142,24 @@ You can use `disableStyles={true}` to disable any built-in styling.
 
+#### 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:
+
+![bootstrap styling](./images/css_classes.png)
+
 #### rainbows!
@@ -144,17 +185,5 @@
 
-## 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

src/index.js

@@ -78,3 +78,6 @@ import React, { Component } from "react";
       onAccept,
-      buttonText
+      buttonText,
+      containerClasses,
+      contentClasses,
+      buttonClasses
     } = this.props;
@@ -102,2 +105,3 @@
         myStyle.top = "0";
+        myStyle.position = "fixed";
         break;
@@ -107,2 +111,3 @@
         myStyle.bottom = "0";
+        myStyle.position = "fixed";
         break;
@@ -112,6 +117,9 @@ }
     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={() => {
@@ -140,3 +148,6 @@ this.accept();
   debug: PropTypes.bool,
-  expires: PropTypes.number
+  expires: PropTypes.number,
+  containerClasses: PropTypes.string,
+  contentClasses: PropTypes.string,
+  buttonClasses: PropTypes.string
 };
@@ -151,3 +162,6 @@
   debug: false,
-  expires: 365
+  expires: 365,
+  containerClasses:"",
+  contentClasses:"",
+  buttonClasses:""
 };
@@ -154,0 +168,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130422

increased by31.13%

Number of package files

12

increased by9.09%

Lines of code

1619

increased by1.63%

Number of lines in readme file

186

increased by18.47%

Worsened metrics

Number of downloads

70561

decreased by-4.72%

No dependency changes