react-combo-modal - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/Modal.jsx

		@@ -92,9 +92,12 @@ 'use strict';
		'div',
		{ className: 'ReactComboModalBackground' },
		{ style: this.props.style.background,
		className: this.props.customClassNames && this.props.customClassNames.background ? this.props.customClassNames.background : 'ReactComboModalBackground' },
		_react2.default.createElement(
		'div',
		{ className: 'ReactComboModalHolder' },
		{ style: this.props.style.holder,
		className: this.props.customClassNames && this.props.customClassNames.holder ? this.props.customClassNames.holder : 'ReactComboModalHolder' },
		_react2.default.createElement(
		'div',
		{ className: 'ReactComboModal' },
		{ style: this.props.style.modal,
		className: this.props.customClassNames && this.props.customClassNames.modal ? this.props.customClassNames.modal : 'ReactComboModal' },
		content
		@@ -125,4 +128,6 @@ )
		Modal.propTypes = {
		open: _propTypes2.default.PropTypes.bool,
		onCloseCallback: _propTypes2.default.PropTypes.func
		open: _propTypes2.default.PropTypes.bool.isRequired,
		onCloseCallback: _propTypes2.default.PropTypes.func.isRequired,
		style: _propTypes2.default.PropTypes.object,
		customClassNames: _propTypes2.default.PropTypes.object
		};

package.json

		{
		"name": "react-combo-modal",
		"version": "0.1.1",
		"version": "0.1.2",
		"keywords": "react, modal, react-component",
		@@ -10,3 +10,3 @@ "description": "React modal component",
		"test": "mocha -r mock-local-storage --compilers js:babel-core/register --require ./test/test.js \"test/*/@(.js\|.jsx)\"",
		"prepublish": "mkdir lib && ./node_modules/.bin/babel Components/Modal.jsx --out-file lib/Modal.jsx && ./node_modules/.bin/babel lib/Modal.jsx",
		"prepublish": "rm -rf ./lib && mkdir lib && ./node_modules/.bin/babel Components/Modal.jsx --out-file lib/Modal.jsx && ./node_modules/.bin/babel lib/Modal.jsx",
		"postpublish": "rm -rf ./lib"
		@@ -13,0 +13,0 @@ },

README.md

		@@ -16,2 +16,4 @@ # react-combo-modal
		## props/options

		### open and onCloseCallback
		There are two mandatory props: first one is "open" which is a boolean and will control visibility of modal. Second one is "onCloseCallback", which will be activate on clicking on darkened area, is a callback function that returns an object with (for now only) open property.
		@@ -55,2 +57,39 @@
		}
		```

		### style and customClassNames
		Some modal require additional styling options and there are two ways of doing that: if you want to add styles inline directly to the modal styles you would use props "style". Other way is to replace existing class names with custom ones in that case you should use props "customClassName". Either way, you are sending object with 3 properties: background, holder and modal each representing one element that is used in react-combo-modal.

		```javascript

		render() {

		const style = {
		background: {},
		holder: {},
		modal: {
		background: 'none'
		}
		};

		const customClassNames = {
		background: '',
		holder: '',
		modal: 'asd'
		};

		return (
		<div>
		<a href="#" onClick={(e) => {e.preventDefault(); this.setState({open: true})}}>Open</a>
		<Modal
		customClassNames={customClassNames}
		style={style}
		open={this.state.open}
		onCloseCallback={this.onCloseCallback}
		>
		Hello I am modal! :D
		</Modal>
		</div>
		);
		}
		```

New alerts