Install
npm install react-modal-promise
or
yarn add react-modal-promise
How to use:
- 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 />
)
}
}
- 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)
- 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:
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!