React Modal Promise Save

Install

npm install react-modal-promise

or

yarn add react-modal-promise

How to use:

1. Place ModalContainer in any place of your App, it will emit new modal instances:

import { Container as ModalContainer } from 'react-modal-promise'

class MyApp extends React.Component {
  render () {
    return (
      <ModalContainer />
    )
  }
}

2. Create you own modal component:

(You should pass isOpen: boolean flag to you Modal component)

You can resolve or reject Promise with onResolve() or onReject() callback from props:

import { create } from 'react-modal-promise'
import { Modal } from 'react-bootstrap'

const MyModal = ({ isOpen, onResolve, onReject }) => (
  <Modal open={isOpen} onHide={() => onReject()}>
    My Super Promised modal
    <button onClick={() => onResolve(/*pass any value*/)}>Confirm modal</button>
    <button onClick={() => onReject(/*throw any error*/)}>Reject modal</button>
  </Modal>
)

And wrap it:

export const myPromiseModal = create(MyModal)

3. Use the modal as a Promise everywhere:

myPromiseModal({ /*pass any props there*/ })
  .then(value => {
    // get value that you passed to 'onResolve' function
  }).catch(error => {
    // get error that you passed to 'onReject' function
  })

ModalContainer props

import { Container as ModalContainer } from 'react-modal-promise';

function App() {
  function onOpen(modalId) {
    // do something when modal open
  }
  function onRemove(modalId) {
    // do something when modal closes
  }
  function onResolve() {
    // do something if modal resolved
  }
  function onReject() {
    // do something if modal rejected
  }

  return (
    <>
      <ModalContainer
        onOpen={onOpen}
        onRemove={onRemove}
        onResolve={onResolve}
        onReject={onReject}
        isAppendIntances
      />
      {/* other application */}
    </>
  );
}

Examples

Simple:

With hook and route control:

Use multiple scopes:

Features

You can use react-modal-promise with any theming (Bootstrap or material-ui, styled-components, or other), all instances work great!