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
<ModalProvider>
to your root component.
1. Add import ModalProvider from 'react-redux-modal-provider'; <Provider => <div> <App /> <ModalProvider /> </div> </Provider> document;
2. Plug in Modal Provider reducer.
import reducer as modalProvider from 'react-redux-modal-provider'; modalProvider;
3. Add modal creation code.
// app.jsximport showModal from 'react-redux-modal-provider';import MyModal from './myModal'; props <div> <p> Hello world </p> <button ="button" => Present modal </button> </div>;
4. Handle modal closing.
// myModal.jsximport Modal from 'react-bootstrap'; props <Modal => <Modal.Body> propsmessage </Modal.Body> <Modal.Footer> <Button =>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'; <Provider => <div> <App /> <StackableModalProvider /> </div> </Provider> document;
SingleModalProvider
One modal at a time. Each new modal triggers hideModal
on previous one.
import SingleModalProvider from 'react-redux-modal-provider'; <Provider => <div> <App /> <SingleModalProvider /> </div> </Provider> document;
redux-modal
?
How is it different from -
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