react-redux-dialog

Gracefully handle presenting Modal Dialogs via Redux. Leverages react-modal.

Installation

npm i -S react redux react-redux react-redux-dialog

Usage

Mount the reducer

The reducer must be mounted at 'modal'.

import { combineReducers } from 'redux';
import { reducer as modal } from 'react-redux-dialog';

export default combineReducers({ 
    modal,
    // ... other reducers
})

Mount the container

import { ModalContainer } from 'react-redux-dialog';
class App extends React.Component {
	render() {
		return (
			<div>
			    <ModalContainer />
			    {/* ... the rest of your component */}
            		</div>
		)
	}
}

Dispatch a modal via setModal

import { setModal } from 'react-redux-dialog';

setModal(AnyComponent, {
    componentProps: { /* Props your AnyComponent uses */ },
    modalProps: { ... }
})

And that's it! The ModalContainer will take care of the rest.

modalProps

| Property | type | Required? | Description | |:--|:--|:--|:-- title | string | no | A title for the modal, that will appear in the header | showClose | [boolean=false] | no | Show a close button for the modal

Additionally any other valid prop that react-modal uses will be passed along to the internal Modal.