Inertia.js-Revamped

Appearance

<Head> component ​

Use the<Head> component to manage your head tags like <title> & <meta>.

Type Signature & Types
typescript
import type { FunctionComponent, PropsWithChildren } from 'react'

type InertiaHeadProps = PropsWithChildren<{
  title?: string
}>

type InertiaHead = FunctionComponent<InertiaHeadProps>

declare const Head: InertiaHead

Related API's:

  • titleCallback

title ​

  • Type: string

If you only need to add a <title> to the document <head>, you may simply pass the title as a prop to the <Head> component.

children ​

  • Type: ReactNode

Within this component, you can include the Elements that you wish to add to the document <head>.

Usage ​

tsx
import { Head } from '@inertiajs-revamped/react'

<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description" />
</Head>

Head extension ​

When building a real application, it can sometimes be helpful to create a custom head component that extends Inertia's <Head> component. This gives you a place to set app-wide defaults, such as appending the app name to the page title.

tsx
import { Head as InertiaHead } from '@inertiajs-revamped/react'

const Head = ({ title, children }) => {
  return (
    <InertiaHead>
      <title>{title ? `${title} - My App` : 'My App'}</title>
      {children}
    </InertiaHead>
  )
}

export default Site

Multiple Head instances ​

It's possible to have multiple instances of the <Head> component throughout your application. For example, your layout can set some default <Head> elements, and then your individual pages can override those defaults.

tsx
import { Head } from '@inertiajs-revamped/react'

<Head>
  <title>My app</title>
  <meta
    head-key="description"
    name="description"
    content="This is the default description"
  />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
tsx
import { Head } from '@inertiajs-revamped/react'

<Head>
  <title>About - My app</title>
  <meta
    head-key="description"
    name="description"
    content="This is a page specific description"
  />
</Head>

Inertia will only ever render one <title> tag; however, all other tags will be stacked since it's valid to have multiple instances of them. To avoid duplicate tags in your <head>, you can use the head-key property, which will make sure the tag is only rendered once. This is illustrated in the example above for the <meta name="description"> tag.

The code example above will render the following HTML.

html
<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <title>About - My app</title>
  <meta name="description" content="This is a page specific description" />
</head>