Skip to content

Modal use

If you want to use the toast as a modal (a top-layer element that deactivates the underlying content on the web page), just set the asModal property to true.

import { useState } from 'react'
import { ConfirmToast } from 'react-confirm-toast'
export function Page() {
const [show, setShow] = useState(false)
function myFunction() {
alert('Done!')
}
return (
<section>
<h1>Page</h1>
<button
onClick={() => {
setShow(true)
}}
>
Click to open ConfirmToast
</button>
<ConfirmToast
asModal={true}
customFunction={myFunction}
setShowConfirmToast={setShow}
showConfirmToast={show}
/>
</section>
)
}