A Guide to Asynchronous result of React modal

This guide is about to get an asynchronous result from react modal.

Sometimes, we want to wait until user select a choice showing a modal, then proceed the following codes based on the user's choice.

Create the modal component

Modal.js



import React from 'react'
import './modal.css'

export default function Modal({isShow, onClose, message}) {
  return isShow && <div className="modal-overlay">
  <div className="modal">
    {message}
    <div className="modal-action">
      <button onClick={()=>onClose(true)}>OK</button>
      <button onClick={()=>onClose(false)}>Cancel</button>
    </div>
  </div>
  </div>
}

Here I created a simple message modal component.
This modal returns a 'true/false' when a user clicks on OK or Cancel buttons.

Create the Modal Context Provider

context.js



import {createContext} from 'react';

export const ModalContext = createContext({
  show: () => {}
})

ModalProvider.js



import React, {useState, useRef, useCallback, createContext, useEffect} from 'react'
import Modal from './Modal'
import {ModalContext} from './context'


export default function ModalProvider({children}) {
  const [isShow, setIsShow] = useState(false);
  const [message, setMessage] = useState("");
  const promiseRef = useRef();

  const show = useCallback((message) => {
    setIsShow(true);
    setMessage(message);

    return new Promise((resolve, reject) => {
      promiseRef.current = {resolve, reject};
    })
  }, [])  

  return <ModalContext.Provider value={{show}}>
    {children}
    <Modal isShow={isShow} onClose={(response) => {
    setIsShow(false);
    if (promiseRef.current) {
      promiseRef.current.resolve(response)
    }
    promiseRef.current = null
    }} message={message} />
  </ModalContext.Provider>
}

app.js



import {useContext} from "react"

import './App.css'

import {ModalContext} from './modal/context'

export default function App() {

  const modal = useContext(ModalContext);

const onShowButtonClick = async () => {

    const result = await modal.show("Hello World!");

    alert('result');

  }

  return (

    <main>

      <h1>React Asyncronous Confirm Modal</h1>

      <div>

        <p>Click the button to show a async confirm modal</p>

        <button onClick={onShowButtonClick}>Show</button>

      </div>

    </main>

  )

}

Final Thoughts

This is a simple and useful way I've found to get the user's choice when I have to proceed the following codes related to the user's decision.
Live Code

Blog

A Guide to Asynchronous result of React modal

Polarisiota

Create the modal component

Create the Modal Context Provider

Final Thoughts

Join Our Newsletter. No Spam, Only the good stuff.

Related