Custom Confirm Modal in React using Context - reactjs

Question

How can I implement native javascript style confirm modal using context api?
I made a codesandbox.
https://codesandbox.io/s/little-sunset-806rdh?file=/src/App.js
Or please see below code.
context.js
const confirmContext = createContext()
function ConfirmProvider({children}){
const [visible, setVisible] = useState(false)
const [message, setMessage] = useState('')
const open = (message) => {
setVisible(true)
setMessage(message)
}
const handleSubmitClick = () => { }
const handleCancelClick = () => { }
if (!visible) return <div />
return (
<ConfirmContext.Provider value={{ open }}>
<div>
{message}
<button onClick={handleSubmitClick}>OK</button>
<button onClick={handleCancelClick}>Cancel</button>
</div>
{children}
</ConfirmContext.Provider>
)
}
const useConfirm = () => useContext(ConfirmContext)
export { ConfirmProvider }
delete.js
function Delete(){
const confirm = useConfirm()
const handleClick = () => {
confirm.open('Are you really delete it?')
// How do I code here when 'OK' or 'Cancel' Button Click?
// if(confirm.open()){
// // do something
// } else {
// // do nothing
// }
}
return (
<div>
<button onClick={handleClick}>Delete</button>
</div>
)
}

Answer 1

return Promise in open function will implement this pattern.
const open = ({ message, confirmText, cancelText }) => {
setVisible(true)
setMessage(message)
return new Promise((res, rej) => {
resolveCallback = res
})
}
const onConfirmClick = () => {
window.alert('on confirm click')
resolveCallback(true)
setVisible(false)
}
const onCancelClick = () => {
window.alert('on cancel click')
resolveCallback(false)
setVisible(false)
}
// use
const c = confirm.open('you really delete it?')
if(c) // do something