Home

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?

  1. 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.

  2. No need to connect() your modal component to Redux, unless you want it to be able to create other modals itself.

Acknowledgements

License

MIT