Navigation

API Reference

useNavigation

A hook that lets you push and pop view components in the navigation stack.

You most likely won't use this hook too often. To push a new component, use the Push Action. When a user presses ESC, we automatically pop to the previous component.

Signature

function useNavigation(): Navigation;

Example

import { Action, ActionPanel, Detail, useNavigation } from "@raycast/api";

function Ping() {
  const { push } = useNavigation();

  return (
    <Detail
      markdown="Ping"
      actions={
        <ActionPanel>
          <Action title="Push" onAction={() => push(<Pong />)} />
        </ActionPanel>
      }
    />
  );
}

function Pong() {
  const { pop } = useNavigation();

  return (
    <Detail
      markdown="Pong"
      actions={
        <ActionPanel>
          <Action title="Pop" onAction={pop} />
        </ActionPanel>
      }
    />
  );
}

export default function Command() {
  return <Ping />;
}

Return

A Navigation object with Navigation.push and Navigation.pop functions. Use the functions to alter the navigation stack.

Types

Return type of the useNavigation hook to perform push and pop actions.

Properties

PropertyDescriptionType

pop*

Pop current view component from the navigation stack.

() => void

push*

Push a new view component to the navigation stack.

(component: React.ReactNode, onPop: () => void) => void

Last updated