@pyreon/head

Manage document head tags (title, meta, link, style, script, JSON-LD) with Pyreon's reactivity system. Supports SSR via renderWithHead.

Install

bun add @pyreon/head

Quick Start

import { HeadProvider, useHead } from '@pyreon/head'

const App = () => {
  useHead({
    title: 'My App',
    meta: [
      { name: 'description', content: 'A Pyreon application' },
      { property: 'og:title', content: 'My App' },
    ],
    link: [{ rel: 'canonical', href: 'https://example.com' }],
  })

  return <div>Hello</div>
}

// Wrap your app with HeadProvider
const Root = () => (
  <HeadProvider>
    <App />
  </HeadProvider>
)

SSR

Use renderWithHead to capture head tags during server-side rendering:

import { renderWithHead } from '@pyreon/head'

const { html, head } = renderWithHead(<App />)
// `head` contains the serialized <title>, <meta>, <link>, etc.

API

Components

• HeadProvider -- context provider that collects head entries from the tree

Hooks

• useHead(input: UseHeadInput) -- declare head tags from any component

SSR

• renderWithHead(vnode) -- render to string and extract head tags as RenderWithHeadResult
• createHeadContext() -- create a standalone head context for manual integration

Types

HeadTag, HeadEntry, UseHeadInput, HeadContextValue, HeadProviderProps, RenderWithHeadResult