react-modal-promise
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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 ModalContainer from 'react-modal-promise'

class MyApp extends React.Component {
  render () {
    return (
      <ModalContainer />
    )
  }
}
  1. 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 { createModal } 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:

const myPromiseModal = createModal(MyModal)
  1. 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
  })

Examples

Simple:

Edit react-modal-promise-example

With hook and route control:

Edit react-modal-promise-router-example

Use multiple scopes:

Edit react-modal-promise-multiple-scopes-example

Features

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.213,473latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.213,473
1.0.10
1.0.06
0.7.6124
0.7.51
0.7.40
0.7.30
0.7.20
0.7.10
0.7.00
0.6.01
0.5.3316
0.5.21
0.5.10
0.5.00
0.4.00
0.3.40
0.3.30
0.3.223
0.3.11
0.3.00
0.2.20
0.2.10
0.2.00
0.1.90
0.1.826
0.1.70
0.1.60
0.1.50
0.1.41
0.1.30
0.1.20
0.1.10
0.1.00
0.0.70
0.0.60
0.0.50
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i react-modal-promise

Weekly Downloads

13,973

Version

1.0.2

License

MIT

Unpacked Size

58 kB

Total Files

16

Last publish

Collaborators

  • cudr