Library for creating async modal-calling functions in React
npm install react-hooks-async-modal> Library for creating async modal-calling functions in React
  
``bash`
npm install --save react-hooks-async-modal
First, import ModalProvider and wrap your App with it:
`tsx
import { ModalProvider } from 'react-hooks-async-modal'
ReactDOM.render(
(
),
document.getElementById('root')
)
`
Then create component for modal, it must have onResolve and onReject callback props. May have custom props like message. Here is an example async implementation of browser's prompt:
`tsx
import { ModalComponentProps } from 'react-hooks-async-modal'
export interface PromptModalProps {
message: string
}
const PromptModal: React.FC
message,
onResolve,
onReject
}) => {
const inputRef = useRef
const backRef = useRef(null)
return (
ref={backRef}
onClick={e =>
// prevent triggering if clicked on a child
(e.target === backRef.current) &&
onReject!('Clicked outside modal')}
>
{message}
To use it as an async function, import
like here:`jsx
import { useModal } from 'react-hooks-async-modal'const App = () => {
const [promptedText, setPromptedText] = useState('none')
const [thrownText, setThrownText] = useState('none')
const callPromptModal = useModal(PromptModal)
const onPrompt = async () => {
try {
const text = await callPromptModal({ message: 'Enter some text' })
setPromptedText(text)
} catch (error) {
setThrownText(error.toString())
}
}
return (
Prompted text: {promptedText}
Thrown: {thrownText}
>
Prompt!
)
}
`If you're connecting your modal to Redux or using some other HOC that returns type incompatible with
argument you can use proxyModal:`tsx
import { proxyModal } from 'react-hooks-async-modal'export default proxyModal(
connect(mapStateToProps, mapDispatchToProps)(PromptModalInner)
)
``MIT