usePage hook

Use the usePage() hook to access shared data in a component.

Type Signature & Types

/** @internal */
interface DefaultPageProps {
  errors: Errors & ErrorBag;
}

/**
 * Returned by `usePage` and received as a prop on `Page<PageProps>`.
 *
 * Define shared interfaces with module augmentation.
 *
 * @see {@link https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation}
 *
 * @example
 * ```typescript
 * // resources/types/inertia-react.d.ts
 * declare module '@inertiajs-revamped/react' {
 *   interface PageProps {
 *     auth: {
 *       user: string
 *     }
 *     versions: {
 *       php: string
 *       laravel: string
 *     }
 *   }
 *
 *   interface DashboardPageProps extends PageProps {
 *     organizations: {
 *       data: App.Model.Organization[]
 *     }
 *   }
 * }
 * ```
 */
interface PageProps extends DefaultPageProps {}

declare function usePage<SharedProps extends PageProps = PageProps>(): Page<SharedProps>

Example

Define shared interfaces with module augmentation.

// inertia-react.d.ts
declare module '@inertiajs-revamped/react' {
  // define defaults
  interface PageProps {
    auth: {
      user: string
    }
    versions: {
      php: string
      laravel: string
    }
  }

  interface BlogPageProps extends PageProps {
    posts: BlogPost[]
  }

  type BlogPost = {
    id: number
    title: string
    description: string
    content: string
  }
}

Usage with props

Use the BlogPageProps interface with props.

// blog-page.tsx
import type { BlogPageProps } from '@inertiajs-revamped/react'

export function BlogPage(props: BlogPageProps) {
  // will infer type `BlogPost[]`
  console.log(props.posts)
}

Usage with hook

Use the usePage hook in a component and pass the HomePageProps interface as generic.

// blog-page.tsx
import { usePage, type BlogPageProps } from '@inertiajs-revamped/react'

export function HomePage() {
  // will infer type `BlogPost[]`
  const props = usePage<BlogPageProps>().props
  console.log(props.posts)

  // or
  const { posts } = usePage<BlogPageProps>().props
  console.log(posts)
}