---
url: https://lit-ui-router.dev/api/reference/hooks/UiOnExit.md
---
[lit-ui-router](../index.md) / UiOnExit

# Interface: UiOnExit

Defined in: [packages/lit-ui-router/src/interface.ts:83](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/interface.ts#L83)

Interface for components that can prevent or confirm navigation away.

When a component implements this interface, UI-Router will call the
`uiCanExit` method before navigating away from the component's state.
This can be used to prompt for confirmation or prevent navigation.

## Example

```ts
class EditForm extends LitElement implements UiOnExit {
  hasUnsavedChanges = false;

  uiCanExit(trans?: Transition): HookResult {
    if (this.hasUnsavedChanges) {
      return window.confirm('Discard unsaved changes?');
    }
    return true;
  }
}
```

## See

* [HookResult](https://ui-router.github.io/core/docs/latest/modules/_transition_interface_.html#hookresult)
* [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html)

## Methods

### uiCanExit()

```ts
uiCanExit(newTransition?): HookResult;
```

Defined in: [packages/lit-ui-router/src/interface.ts:108](https://github.com/simshanith/lit-ui-router/blob/3ab90929a8d23dda96e259d7396a274c5b05398e/packages/lit-ui-router/src/interface.ts#L108)

A UI-Router view has a Lit `Component` (see [NormalizedLitViewDeclaration.component](../types/NormalizedLitViewDeclaration.md#component)).
The `Component` may define component-level hooks which UI-Router will call at the appropriate times.
These callbacks are similar to Transition Hooks ([IHookRegistry](https://ui-router.github.io/core/docs/latest/interfaces/_transition_interface_.ihookregistry.html)), but are only called if the view/component is currently active.

The uiCanExit callback is called when the routed component's state is about to be exited.

The callback can be used to cancel or alter the new [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) that would otherwise exit the component's state.

This callback is used to inform a view that it is about to be exited, due to a new [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html).
The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should
return a value, or a promise for a value. If a promise is returned, the new Transition waits until the
promise settles.

Called when:

* The component is still active inside a `ui-view`
* A new Transition is about to run
* The new Transition will exit the view's state

Called with:

* The [Transition](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) that is about to exit the component's state

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `newTransition?` | [`Transition`](https://ui-router.github.io/core/docs/latest/classes/_transition_transition_.transition.html) |

#### Returns

[`HookResult`](https://ui-router.github.io/core/docs/latest/modules/_transition_interface_.html#hookresult)

a hook result which may cancel or alter the pending Transition (see [HookResult](https://ui-router.github.io/core/docs/latest/modules/_transition_interface_.html#hookresult))