Quick Start

This page shows the shortest path to integrate TanStack Head Controller into a TanStack Router app.

1. Install packages

ninpmpnpm

ni @thcjs/core @thcjs/react thc-plugin-merge

npm install @thcjs/core @thcjs/react thc-plugin-merge

pnpm add @thcjs/core @thcjs/react thc-plugin-merge

2. Create a controller and place it in router context

router.tsx

tsx

import { createRouter } from '@tanstack/react-router'
import { createHeadController } from '@thcjs/core'
import { thcMerge } from 'thc-plugin-merge'

export const router = createRouter({
  routeTree,
  context: {
    ...createHeadController({
      plugins: [
        thcMerge(),
      ]
    })
  },
})

3. Render in your root document head

__root.tsx

tsx

import { HeadController } from '@thcjs/react'

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <head>
        <HeadController />
      </head>
      <body>{children}</body>
    </html>
  )
}

4. Define head at route level

about.tsx

tsx

export const Route = createFileRoute('/about')({
  head: () => ({
    meta: [
      { title: 'About' },
      { property: 'og:title', content: 'About' },
    ],
  }),
})

5. Optionally edit route context

This example uses editContext, but the key idea is simple: keep existing route context intact and add only the settings you need.

about.tsx

tsx

import { editContext } from '@thcjs/core/context'

export const Route = createFileRoute('/about')({
  context: (ctx) =>
    editContext(ctx, {
      configs: { debug: true },
    }),
})

Next, see Usage for plugin patterns and practical tips.

Quick Start ​

1. Install packages ​

2. Create a controller and place it in router context ​

3. Render in your root document head ​

4. Define head at route level ​

5. Optionally edit route context ​