react-modal-dialog - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

react-modal-dialog.sublime-workspace

scripts/publishStaticSite.sh

package.json

		{
		"name": "react-modal-dialog",
		"version": "0.1.2",
		"version": "0.1.3",
		"description": "A simple, idiomatic, and declarative way to launch modal dialogs in ReactJS",
		@@ -13,2 +13,3 @@ "repository": {
		"start": "npm run build",
		"github": "./scripts/publishStaticSite.sh",
		"build": "babel src --out-dir lib",
		@@ -15,0 +16,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

README.md

		# React Modal Dialog

		[Check out the demo!](http://www.qimingweng.com/react-modal-dialog/)

		This project is in progress. Feel free to read the code to use on your own. Documentation is coming; or if you want to contribute to the documentation, that is great as well.
		@@ -17,20 +19,74 @@

		## For Your Own Implementation
		# Idiomatic Syntax

		For now, I recommend you check out the source code of this project, as it is quite simple, to really get an understanding of how this dialog works. I've spent a lot of time trying many paradigms (you can read about all that [here](#todo)), and I've settled on this one for good reasons.
		This is what I am trying to achieve. A dialog completely controlled by its owner component. Where its existence is just whether or not that component is there. I believe this is the most idiomatic way a dialog should work.

		The hardest part about dialogs is their architecture, not the UI or specific implementation. Feel free to swap out your own ModalDialog class into my existing ModalContainer, or disassemble ModalContainer into your own portal and background class.
		```javascript
		class Button extends React.Component {
		state = {
		isShowingModal: false
		}
		openModal = () => {
		this.setState({isShowingModal: true});
		}
		render() {
		return (
		<a onClick={this.openModal}>
		Button Text
		{this.state.isShowingModal ?
		<ModalComponentHere/>
		: null}
		</a>
		)
		}
		}
		```

		To get the esc key to only close the top dialog when there are two modal dialogs, I employed the use of an event controller. However, you may find this to be peculiar or you may want to attach your dialogs to your own event controller. If that's true, you may want to branch this project to edit the code in `componentDidMount` and `componentWillUnmount` of `ModalPortal`.
		# Actual Usage

		## Building
		This is how react-modal-dialog works. You can create a component that wraps ModalContainer and ModalDialog into one CustomDialog, but the reason I have separated is so that I can add a loading spinner above the background but below the dialog.

		To build the website, navigate to `/site` and run `npm start`
		```javascript
		import {ModalContainer, ModalDialog} from 'react-modal-dialog';

		## Usage
		// In a render function:
		<ModalContainer onClose={...}>
		<ModalDialog onClose={...}>
		<h1>Dialog Content</h1>
		<p>More Content. Anything goes here</p>
		</ModalDialog>
		</ModalContainer>
		```

		...
		## Loading Spinners

		## Styles (CSS and Images)
		```javascript
		import ReactSpinner from 'react-spinjs';

		// In a render function
		<ModalContainer onClose={...}>
		{this.state.isLoading ?
		<ReactSpinner/>
		:
		<ModalDialog onClose={...}/>
		}
		</ModalContainer onClose={...}>
		```

		# Styles (CSS and Images)

		For your convenience, I have included some stylesheets in the package that you can either load in with something like webpack, or use as a reference for your own style implementation. I have also included the images necessary for the close button.

		They are located at `require('react-modal-dialog/css/ReactModalDialog.scss')`

		## For Your Own Implementation

		For now, I recommend you check out the source code of this project, as it is quite simple, to really get an understanding of how this dialog works. I've spent a lot of time trying many paradigms (you can read about all that [here](#todo)), and I've settled on this one for good reasons.

		The hardest part about dialogs is their architecture, not the UI or specific implementation. Feel free to swap out your own ModalDialog class into my existing ModalContainer, or disassemble ModalContainer into your own portal and background class.

		To get the esc key to only close the top dialog when there are two modal dialogs, I employed the use of an event controller. However, you may find this to be peculiar or you may want to attach your dialogs to your own event controller. If that's true, you may want to branch this project to edit the code in `componentDidMount` and `componentWillUnmount` of `ModalPortal`.

		# Contributing

		Feel free to send pull requests, or help document this project more.

react-modal-dialog - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics