easily overwrite just the styles you want, v 0.3.0

Author: zackify

README.md

@@ -17,7 +17,7 @@
 An incredibly simple modal dialog, because after writing [this post](http://reactjsnews.com/modals-in-react/), I found none of the ones listed let you easily overwrite the css!
 
 ~~~js
-import Modal, {closeClass} from 'simple-react-modal'
+import Modal, {closeStyle} from 'simple-react-modal'
 
 export default class App extends React.Component{
 
@@ -40,12 +40,14 @@ export default class App extends React.Component{
       <div>
       <a onClick={this.show.bind(this)}>Open Modal</a>
       <Modal
-      className="test-class" //this will completely overwrite the default css
+      className="test-class" //this will completely overwrite the default css completely
+      style={{background: 'red'}} //overwrites the default background
+      containerStyle={{background: 'blue'}} //changes styling on the inner content area
       closeOnOuterClick={true}
       show={this.state.show}
       onClose={this.close.bind(this)}>
 
-      <a style={closeClass} onClick={this.close.bind(this)}>X</a>
+      <a style={closeStyle} onClick={this.close.bind(this)}>X</a>
       <div>hey</div>
 
       </Modal>
@@ -61,8 +63,12 @@ export default class App extends React.Component{
 - `show`: true or false
 - `onClose`: when the modal is sending the close event (only happens is `closeOnOuterClick` is true)
 - `className`: this will allow you to completely change the default css located in the component.
+- `containerStyle`: changes styles on the modal content area
 
-Everything else will be merged and you're free to apply any props you want. Minimum required props would be `show`. You can optionally pull in `modalClass` and merge any styles with it and set the style prop on the modal.
+Minimum required props would be `show` and `onClose`. You can optionally pull in `closeStyle` to use the default close button.
 
-The big difference is that you can require the css from 'simple-react-modal/dist/modal' and easily add other classes that make it look however you like.
-Customizing the style is easy, to target the actual content area it will be `.your-class div`.
+###Why this modal?
+
+The big difference is that you can use the default style, overwrite just the things you want with the `style` or `containerStyle` props, or throw on a class name and completely style everything yourself.
+
+Customizing the style via a css class is easy, to target the actual content area it will be `.your-class div`.

build/simple-modal.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -20,48 +20,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var modalClass = {
-  position: 'fixed',
-  'font-family': 'Arial, Helvetica, sans-serif',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  background: 'rgba(0, 0, 0, 0.8)',
-  'z-index': 99999,
-  opacity: 0,
-  transition: 'opacity 400ms ease-in',
-  opacity: 1,
-  'pointer-events': 'auto'
-};
-
-exports.modalClass = modalClass;
-var containerClass = {
-  width: '400px',
-  position: 'relative',
-  margin: '10% auto',
-  padding: '5px 20px 13px 20px',
-  background: '#fff'
-};
-
-exports.containerClass = containerClass;
-var closeClass = {
-  background: '#606061',
-  color: '#FFFFFF',
-  'line-height': '25px',
-  position: 'absolute',
-  right: '-12px',
-  'text-align': 'center',
-  top: '-10px',
-  width: '24px',
-  'text-decoration': 'none',
-  'font-weight': 'bold',
-  borderRadius: '12px',
-  boxDhadow: '1px 1px 3px #000',
-  cursor: 'pointer'
-};
-
-exports.closeClass = closeClass;
+var _styles = require('./styles');
+
+var _styles2 = _interopRequireDefault(_styles);
 
 var Modal = (function (_React$Component) {
   _inherits(Modal, _React$Component);
@@ -76,27 +37,28 @@ var Modal = (function (_React$Component) {
   _createClass(Modal, [{
     key: 'hideOnOuterClick',
     value: function hideOnOuterClick(event) {
-      if (!this.props.closeOnOuterClick) return;
+      if (this.props.closeOnOuterClick === false) return;
       if (event.target.dataset.modal) this.props.onClose(event);
     }
   }, {
     key: 'render',
     value: function render() {
       if (!this.props.show) return null;
-      var modal = modalClass;
-      var container = containerClass;
+      var modalStyle = _extends({}, _styles2['default'].modal, this.props.style);
+      var containerStyle = _extends({}, _styles2['default'].container, this.props.containerStyle);
 
+      //completely overwrite if they use a class
       if (this.props.className) {
-        modal = null;
-        container = null;
+        modalStyle = this.props.style;
+        containerStyle = this.props.containerStyle;
       }
 
       return _react2['default'].createElement(
         'div',
-        _extends({}, this.props, { style: modal, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
+        _extends({}, this.props, { style: modalStyle, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
         _react2['default'].createElement(
           'div',
-          { style: container },
+          { style: containerStyle },
           this.props.children
         )
       );
@@ -106,4 +68,6 @@ var Modal = (function (_React$Component) {
   return Modal;
 })(_react2['default'].Component);
 
-exports['default'] = Modal;
+exports['default'] = Modal;
+var closeStyle = _styles2['default'].close;
+exports.closeStyle = closeStyle;

build/styles.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var modal = {
+  position: 'fixed',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  background: 'rgba(0, 0, 0, 0.8)',
+  zIndex: 99999,
+  opacity: 0,
+  transition: 'opacity 400ms ease-in',
+  opacity: 1,
+  pointerEvents: 'auto'
+};
+
+var container = {
+  width: '400px',
+  position: 'relative',
+  margin: '10% auto',
+  padding: '5px 20px 13px 20px',
+  background: '#fff'
+};
+
+var close = {
+  background: '#606061',
+  color: '#FFFFFF',
+  lineHeight: '25px',
+  position: 'absolute',
+  right: '-12px',
+  textAlign: 'center',
+  top: '-10px',
+  width: '24px',
+  textDecoration: 'none',
+  fontWeight: 'bold',
+  borderRadius: '12px',
+  boxShadow: '1px 1px 3px #000',
+  cursor: 'pointer'
+};
+
+exports['default'] = {
+  modal: modal,
+  container: container,
+  close: close
+};
+module.exports = exports['default'];

dist/simple-react-modal.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -22,48 +22,9 @@ var _react = (typeof window !== "undefined" ? window['React'] : typeof global !=
 
 var _react2 = _interopRequireDefault(_react);
 
-var modalClass = {
-  position: 'fixed',
-  'font-family': 'Arial, Helvetica, sans-serif',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  background: 'rgba(0, 0, 0, 0.8)',
-  'z-index': 99999,
-  opacity: 0,
-  transition: 'opacity 400ms ease-in',
-  opacity: 1,
-  'pointer-events': 'auto'
-};
+var _styles = require('./styles');
 
-exports.modalClass = modalClass;
-var containerClass = {
-  width: '400px',
-  position: 'relative',
-  margin: '10% auto',
-  padding: '5px 20px 13px 20px',
-  background: '#fff'
-};
-
-exports.containerClass = containerClass;
-var closeClass = {
-  background: '#606061',
-  color: '#FFFFFF',
-  'line-height': '25px',
-  position: 'absolute',
-  right: '-12px',
-  'text-align': 'center',
-  top: '-10px',
-  width: '24px',
-  'text-decoration': 'none',
-  'font-weight': 'bold',
-  borderRadius: '12px',
-  boxDhadow: '1px 1px 3px #000',
-  cursor: 'pointer'
-};
-
-exports.closeClass = closeClass;
+var _styles2 = _interopRequireDefault(_styles);
 
 var Modal = (function (_React$Component) {
   _inherits(Modal, _React$Component);
@@ -78,27 +39,28 @@ var Modal = (function (_React$Component) {
   _createClass(Modal, [{
     key: 'hideOnOuterClick',
     value: function hideOnOuterClick(event) {
-      if (!this.props.closeOnOuterClick) return;
+      if (this.props.closeOnOuterClick === false) return;
       if (event.target.dataset.modal) this.props.onClose(event);
     }
   }, {
     key: 'render',
     value: function render() {
       if (!this.props.show) return null;
-      var modal = modalClass;
-      var container = containerClass;
+      var modalStyle = _extends({}, _styles2['default'].modal, this.props.style);
+      var containerStyle = _extends({}, _styles2['default'].container, this.props.containerStyle);
 
+      //completely overwrite if they use a class
       if (this.props.className) {
-        modal = null;
-        container = null;
+        modalStyle = this.props.style;
+        containerStyle = this.props.containerStyle;
       }
 
       return _react2['default'].createElement(
         'div',
-        _extends({}, this.props, { style: modal, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
+        _extends({}, this.props, { style: modalStyle, onClick: this.hideOnOuterClick, 'data-modal': "true" }),
         _react2['default'].createElement(
           'div',
-          { style: container },
+          { style: containerStyle },
           this.props.children
         )
       );
@@ -109,7 +71,61 @@ var Modal = (function (_React$Component) {
 })(_react2['default'].Component);
 
 exports['default'] = Modal;
+var closeStyle = _styles2['default'].close;
+exports.closeStyle = closeStyle;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./styles":2}],2:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var modal = {
+  position: 'fixed',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  background: 'rgba(0, 0, 0, 0.8)',
+  zIndex: 99999,
+  opacity: 0,
+  transition: 'opacity 400ms ease-in',
+  opacity: 1,
+  pointerEvents: 'auto'
+};
+
+var container = {
+  width: '400px',
+  position: 'relative',
+  margin: '10% auto',
+  padding: '5px 20px 13px 20px',
+  background: '#fff'
+};
+
+var close = {
+  background: '#606061',
+  color: '#FFFFFF',
+  lineHeight: '25px',
+  position: 'absolute',
+  right: '-12px',
+  textAlign: 'center',
+  top: '-10px',
+  width: '24px',
+  textDecoration: 'none',
+  fontWeight: 'bold',
+  borderRadius: '12px',
+  boxShadow: '1px 1px 3px #000',
+  cursor: 'pointer'
+};
+
+exports['default'] = {
+  modal: modal,
+  container: container,
+  close: close
+};
+module.exports = exports['default'];
+
 },{}]},{},[1])(1)
 });