Skip to main content


The useConfirmExit() hook lets you display a prompt to the user before he closes the current tab depending on whether the tab is declared to be dirty or not.


import { useConfirmExit } from 'react-haiku';


Try to close this tab with the window dirty!

Dirty: false

import { useConfirmExit, useBoolToggle } from "react-haiku"

export const Component = () => {
const [dirty, toggleDirty] = useBoolToggle();


return (
<b>Try to close this tab with the window dirty!</b>
<p>Dirty: {`${dirty}`}</p>
<button onClick={() => toggleDirty()}>{dirty ? 'Set Clean' : 'Set Dirty'}</button>


This hook accepts the following arguments:

  • dirty - the value to check when activating/deactivating the exit confirmation message
  • message - while this is availabe, using it currently has no effect since most browsers have disabled the feature of adding custom confirmation messages on this type of event