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.