Awesome
React Redux Modal Provider
react-redux-modal-provider
controls the state of your React modal components using Redux.
Installation
npm i --save react-redux-modal-provider
Usage
1. Add <ModalProvider>
to your root component.
import ModalProvider from 'react-redux-modal-provider';
export default render(
<Provider store={store}>
<div>
<App />
<ModalProvider />
</div>
</Provider>,
document.getElementById('app')
);
2. Plug in Modal Provider reducer.
import { reducer as modalProvider } from 'react-redux-modal-provider';
export default combineReducers({
modalProvider,
});
3. Add modal creation code.
// app.jsx
import { showModal } from 'react-redux-modal-provider';
import MyModal from './myModal';
export default (props) => (
<div>
<p>
Hello world
</p>
<button
type="button"
onClick={() => showModal(MyModal, { message: 'Hello' })}>
Present modal
</button>
</div>
);
4. Handle modal closing.
// myModal.jsx
import { Modal } from 'react-bootstrap';
export default (props) => (
<Modal show={props.show}>
<Modal.Body>
{props.message}
</Modal.Body>
<Modal.Footer>
<Button onClick={props.hideModal}>Ok</Button>
</Modal.Footer>
</Modal>
);
show
and hideModal
props are passed in automatically.
Implementations
StackableModalProvider
(default)
This is the default ModalProvider
implementation. Each new modal stacks up on top of previous one.
import { StackableModalProvider } from 'react-redux-modal-provider';
export default render(
<Provider store={store}>
<div>
<App />
<StackableModalProvider />
</div>
</Provider>,
document.getElementById('app')
);
SingleModalProvider
One modal at a time. Each new modal triggers hideModal
on previous one.
import { SingleModalProvider } from 'react-redux-modal-provider';
export default render(
<Provider store={store}>
<div>
<App />
<SingleModalProvider />
</div>
</Provider>,
document.getElementById('app')
);
How is it different from redux-modal
?
-
You don't have to think about where your modal component should fit into component tree, because it doesn't really matter where to render a modal.
-
No need to
connect()
your modal component to Redux, unless you want it to be able to create other modals itself.
Acknowledgements
-
Thanks @yesmeck, author of
redux-modal
, for webpack config I borrowed. -
Thanks @diegoddox, author of
react-redux-toastr
, for the idea how to dispatch actions from anywhere usingEventEmitter
.
License
MIT