implemented issue #15

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:
+
+![bootstrap styling](./images/css_classes.png)
+
 #### rainbows!
 
 ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)
@@ -138,19 +179,7 @@ If you're crazy enough you can even make a rainbow colored bar:
 </CookieConsent>
 ```
 
-## Debugging it
+<!-- links -->
-
-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.
-
 [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

build/index.js

@@ -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;

package.json

@@ -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": {

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 className={`cookieConsent ${containerClasses}`} style={myStyle}>
-        <div style={myContentStyle}>{this.props.children}</div>
+        <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;