Introduction

re-modal-ctx controls the state of your React modal components using react context.

Installation

npm i --save re-modal-ctx

or

yarn add re-modal-ctx

Usage

1. Add <ModalProvider> to your root component.

import ModalProvider from 're-modal-ctx';

<>
  <App />
  <ModalProvider />
</>;

2. Add modal creation code.

// app.jsx
import { showModal } from 're-modal-ctx';
import { AwesomeModal } from './AwesomeModal';

export default (props) => (
  <div>
    <p>Hello world</p>
    <button
      type='button'
      onClick={() => showModal(AwesomeModal, { message: 'Hello' })}
    >
      Present modal
    </button>
  </div>
);

4. Handle modal closing.

// AwesomeModal.jsx
import { Modal } from 'react-bootstrap';

export const AwesomeModal = (props) => (
  <Modal show={props.show} onHide={props.hideModal}>
    <Modal.Body>{props.message}</Modal.Body>

    <Modal.Footer>
      <Button onClick={props.hideModal}>Ok</Button>
    </Modal.Footer>
  </Modal>
);

Implementations

StackableModalProvider (default)

This is the default ModalProvider implementation. Each new modal stacks up on top of previous one.

import { StackableModalProvider } from 're-modal-ctx';

<>
  <App />
  <StackableModalProvider />
</>;

SingleModalProvider

One modal at a time. Each new modal triggers hideModal on previous one.

import { SingleModalProvider } from 're-modal-ctx';

<>
  <App />
  <SingleModalProvider />
</>;

How is it different from react-redux-modal-provider?

1. You don't need to install redux.

2. TypeScript added.

3. Implemented some bug fixes.

Acknowledgements

• Thanks @mayask, author of react-redux-modal-provider, for awesome library.

• 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 using EventEmitter.

License

MIT