cudr / react-modal-promise

Ease way to use React modal components as Promise

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!

react-modal-promise's Issues

typos: isAppendIntances

isAppendInstances ?

What license is it?

Under what license is this library published?

Without license there is no way for users to use it (missing license file means that all right reserved for an author and nobody can use it)

Trying to pass props from a Typescript component fails.

This is the TSX component that calls the modal:

TitleModal({ isOpen, currentTitle: 'hi' })
  .then(() => {})
  .catch(() => {});

Error message:

(property) currentTitle: string
Argument of type '{ isOpen: boolean; currentTitle: string; }' is not assignable to parameter of type 'Omit<InstanceProps<any, any>, keyof InstanceProps<Resolve, Reject>> & Partial<InstanceProps<any, any>>'.
Object literal may only specify known properties, and 'currentTitle' does not exist in type 'Omit<InstanceProps<any, any>, keyof InstanceProps<Resolve, Reject>> & Partial<InstanceProps<any, any>>'.ts(2345)

Using:

"react": "^17.0.2", "react-modal-promise": "^1.0.2", "typescript": "^4.5.3"

Can I rejectAll()?

Hi. I've got a request to add some functionality. I have a case where there's two buttons on a modal, the first one resolves with true, the second one with false. That way I can check what user clicked.
I simply do if (await myModal())
But sometimes I need to close the modals from outside. That can be achieved with method resolveAll(). The problem is, the modal is resolved as undefined, which is, of course, interpreted as false.
I could do something like
a = await myModal()
if (a === undefined)
But it feels wrong.
I guess it would be much better if i could rejectAll() the promises and try to catch errors, instead of checking what promises return.
Unfortunately, there's no such a method. So my question is could you add this method?

"open" property receives hash instead of boolean

The "open" property passed to the Modal should be boolean, but here it's actually passing the found hash instead of "true"...

handling of history back

Is it possible to close all of "promised" modals on history back?

Deprecated warning

Not working on typescript?

Different types for onResolve and onReject?

I've got a typescript promise component that should either resolve with a certain value, or reject with an Error object. But the types for this library say that onResolve and onReject both take the same type T.

The typescript types for Promise.prototype.then and Promise.prototype.catch show that the rejected callbacks take a different type to the resolved callback: https://github.com/microsoft/TypeScript/blob/cec2fda9a53620dc545a2c4d7b0156446ab145b4/lib/lib.es5.d.ts#L1446-L1461

Would you consider allowing different types for the argument to onResolve and onReject here?

react-modal-promise/src/types.ts

Lines 22 to 32 in b7ce682

	export interface InstanceProps<Result> extends InstanceOptions {
	isOpen: boolean
	instanceId: Hex
	onReject: (reason?: Result) => void
	onResolve: (result?: Result) => void
	/** @deprecated **/
	open: boolean
	/** @deprecated **/
	close: (result?: Result) => void
	}

Maybe something like this:

export interface InstanceProps<Result, RejectReason = Result> extends InstanceOptions { 
   //                                ^^^^^^^^^^^^^^^^^^^^^^^
   isOpen: boolean 
   instanceId: Hex 
   onReject: (reason?: RejectReason) => void 
   //                  ^^^^^^^^^^^^
   onResolve: (result?: Result) => void 
  
   /** @deprecated **/ 
   open: boolean 
   /** @deprecated **/ 
   close: (result?: Result) => void 
 } 

When opening new modal from another modal, the new modal isn't focusable.

I am opening a modal, after than I have another modal which I open from the first modal. The new modal that is opened cannot be focused. Pressing Escape closing the first modal. If there are any input fields in the newer modal, they are not usable.

With hook and route control - Re render

Hi, I have a problem when I use the modal with the hook and route control. It basically causes the whole page to rerender, and I think is because of the Context, because I wrap the whole application in it.

If I modify the ModalProvider component to use constate (does the same thing as Redux, but is much easier to implement) instead of react Context do you think it will prevent rerendering the whole application?

Sorry if it's a stupid question, I'm pretty new at React.

Request: Please add a basic Typescript example.

Extremely useful package! Thanks!

A basic Typescript example would be helpful.

React 17 support

Does this work with React 17? this package specifically lists react 16 as a strict dependency and does not allow 17 be installed.

Can you update the peer dependency to allow react 17?