added buttonFlipping

README.md

@@ -116,6 +116,7 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 | contentStyle  | object                           | [look at source][contentStyle] | React styling object for the content.                                                |
 | disableButtonStyles | boolean                    | false         | If enabled the button will have no default style. (you can still supply style through props)       |
 | enableDeclineButton | boolean                    | false         | If enabled the decline button will be rendered       |
+| flipButtons | boolean                    | false         | If enabled the accept and decline buttons will be flipped       |
 | ButtonComponent    | React component             | button | React Component to render as a button.
 
 ## Debugging it
@@ -199,6 +200,22 @@ You can make the cookiebar disappear after scrolling a certain percentage using
 </CookieConsent>
 ```
 
+#### Flipping the buttons
+If you enable the decline button you can pass along the "flipButtons" property to turn the button around:
+
+```js
+<CookieConsent
+    enableDeclineButton
+    flipButtons
+>
+    Flipped buttons
+</CookieConsent>
+```
+
+Which results in:
+
+![flipped buttons](./images/flipped.png)
+
 #### Extra cookie options
 You can add more cookie options using the extraCookieOptions parameter like so:
 

build/index.js

@@ -578,11 +578,11 @@ var CookieConsent = function (_Component) {
         margin: "15px"
       },
       declineButtonStyle: {
-        background: "#ffd42d",
+        background: "#c12a2a",
         border: "0",
         borderRadius: "0px",
         boxShadow: "none",
-        color: "black",
+        color: "#e5e5e5",
         cursor: "pointer",
         flex: "0 0 auto",
         padding: "5px 10px",
@@ -727,6 +727,7 @@ var CookieConsent = function (_Component) {
           declineButtonId = _props4.declineButtonId,
           disableButtonStyles = _props4.disableButtonStyles,
           enableDeclineButton = _props4.enableDeclineButton,
+          flipButtons = _props4.flipButtons,
           ButtonComponent = _props4.ButtonComponent;
 
 
@@ -769,6 +770,42 @@ var CookieConsent = function (_Component) {
           break;
       }
 
+      var buttonsToRender = [];
+
+      // add decline button
+      enableDeclineButton && buttonsToRender.push(_react2.default.createElement(
+        ButtonComponent,
+        {
+          key: "declineButton",
+          style: myDeclineButtonStyle,
+          className: declineButtonClasses,
+          id: declineButtonId,
+          onClick: function onClick() {
+            _this2.decline();
+          }
+        },
+        declineButtonText
+      ));
+
+      // add accept button
+      buttonsToRender.push(_react2.default.createElement(
+        ButtonComponent,
+        {
+          key: "acceptButton",
+          style: myButtonStyle,
+          className: buttonClasses,
+          id: buttonId,
+          onClick: function onClick() {
+            _this2.accept();
+          }
+        },
+        buttonText
+      ));
+
+      if (flipButtons) {
+        buttonsToRender.reverse();
+      }
+
       return _react2.default.createElement(
         "div",
         { className: "cookieConsent " + containerClasses, style: myStyle },
@@ -777,30 +814,9 @@ var CookieConsent = function (_Component) {
           { style: myContentStyle, className: contentClasses },
           this.props.children
         ),
-        _react2.default.createElement(
+        buttonsToRender.map(function (button) {
-          ButtonComponent,
+          return button;
-          {
+        })
-            style: myButtonStyle,
-            className: buttonClasses,
-            id: buttonId,
-            onClick: function onClick() {
-              _this2.accept();
-            }
-          },
-          buttonText
-        ),
-        enableDeclineButton && _react2.default.createElement(
-          ButtonComponent,
-          {
-            style: myDeclineButtonStyle,
-            className: declineButtonClasses,
-            id: declineButtonId,
-            onClick: function onClick() {
-              _this2.decline();
-            }
-          },
-          declineButtonText
-        )
       );
     }
   }]);
@@ -840,6 +856,7 @@ CookieConsent.propTypes = {
   extraCookieOptions: _propTypes2.default.object,
   disableButtonStyles: _propTypes2.default.bool,
   enableDeclineButton: _propTypes2.default.bool,
+  flipButtons: _propTypes2.default.bool,
   ButtonComponent: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.element])
 };
 
@@ -868,6 +885,7 @@ CookieConsent.defaultProps = {
   extraCookieOptions: {},
   disableButtonStyles: false,
   enableDeclineButton: false,
+  flipButtons: false,
   ButtonComponent: function ButtonComponent(_ref) {
     var children = _ref.children,
         props = _objectWithoutProperties(_ref, ["children"]);

src/index.js

@@ -172,6 +172,7 @@ class CookieConsent extends Component {
       declineButtonId,
       disableButtonStyles,
       enableDeclineButton,
+      flipButtons,
       ButtonComponent
     } = this.props;
 
@@ -217,33 +218,51 @@ class CookieConsent extends Component {
         break;
     }
 
+    const buttonsToRender = [];
+
+    // add decline button
+    enableDeclineButton &&
+      buttonsToRender.push(
+        <ButtonComponent
+          key="declineButton"
+          style={myDeclineButtonStyle}
+          className={declineButtonClasses}
+          id={declineButtonId}
+          onClick={() => {
+            this.decline();
+          }}
+        >
+          {declineButtonText}
+        </ButtonComponent>
+      );
+
+    // add accept button
+    buttonsToRender.push(
+      <ButtonComponent
+        key="acceptButton"
+        style={myButtonStyle}
+        className={buttonClasses}
+        id={buttonId}
+        onClick={() => {
+          this.accept();
+        }}
+      >
+        {buttonText}
+      </ButtonComponent>
+    );
+
+    if (flipButtons) {
+      buttonsToRender.reverse();
+    }
+
     return (
       <div className={`cookieConsent ${containerClasses}`} style={myStyle}>
         <div style={myContentStyle} className={contentClasses}>
           {this.props.children}
         </div>
-        <ButtonComponent
+        {buttonsToRender.map(button => {
-          style={myButtonStyle}
+          return button;
-          className={buttonClasses}
+        })}
-          id={buttonId}
-          onClick={() => {
-            this.accept();
-          }}
-        >
-          {buttonText}
-        </ButtonComponent>
-        {enableDeclineButton && (
-          <ButtonComponent
-            style={myDeclineButtonStyle}
-            className={declineButtonClasses}
-            id={declineButtonId}
-            onClick={() => {
-              this.decline();
-            }}
-          >
-            {declineButtonText}
-          </ButtonComponent>
-        )}
       </div>
     );
   }
@@ -279,6 +298,7 @@ CookieConsent.propTypes = {
   extraCookieOptions: PropTypes.object,
   disableButtonStyles: PropTypes.bool,
   enableDeclineButton: PropTypes.bool,
+  flipButtons: PropTypes.bool,
   ButtonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
 };
 
@@ -307,6 +327,7 @@ CookieConsent.defaultProps = {
   extraCookieOptions: {},
   disableButtonStyles: false,
   enableDeclineButton: false,
+  flipButtons: false,
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>
 };