@unhead/react

> Full-stack management for React applications

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

Features

- ⚛️ React-optimized head management
- 🪝 React hooks integration
- 🔄 Reactive titles, meta tags, and other head elements
- 🔍 SEO-friendly head control
- 🖥️ Server-side rendering support
- 📦 Lightweight with zero dependencies (except for React & unhead)

Installation

``bash


npm

npm install @unhead/react

yarn

yarn add @unhead/react

pnpm

pnpm add @unhead/react
`

Usage

$3

#### Client-side (SPA)

`jsx
import { createHead, UnheadProvider } from '@unhead/react/client'
// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

const head = createHead({ / config / })

createRoot(document.getElementById('root')).render(





)
`

#### Server-side (SSR)

`jsx
import { createHead, UnheadProvider } from '@unhead/react/server'
// entry-server.jsx
import { StrictMode } from 'react'
import { renderToString } from 'react-dom/server'
import App from './App'

export function render(url) {
const head = createHead()
const html = renderToString(





)
return { html, head }
}
`

`jsx
import { createHead, UnheadProvider } from '@unhead/react/client'
// entry-client.jsx (for hydration)
import { StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'
import App from './App'

const head = createHead({ / config / })

hydrateRoot(
document.getElementById('root'),





)
`

$3

`jsx
// Home.jsx
import { useHead } from '@unhead/react'

function Home() {
useHead({
title: 'Home Page',
meta: [
{
name: 'description',
content: 'Welcome to our website'
}
]
})

return

Home

}

export default Home
`

$3

`jsx
// About.jsx
import { useSeoMeta } from '@unhead/react'

function About() {
useSeoMeta({
title: 'About Us',
description: 'Learn more about our company',
ogTitle: 'About Our Company',
ogDescription: 'Our fantastic about page',
ogImage: 'https://example.com/image.jpg',
})

return

About Us

}

export default About
`

$3

`jsx
import { useHead } from '@unhead/react'
// Profile.jsx
import { useEffect, useState } from 'react'

function Profile() {
const [userName, setUserName] = useState('User')

// Create a head entry that can be patched
const headEntry = useHead()

useEffect(() => {
headEntry.patch({
title: ${userName} - Profile, // Reactive title
meta: [
{
name: 'description',
content: ${userName}'s profile page, // Reactive description
},
],
})
}, [userName, headEntry])

return (


)
}

export default Profile
`

Development

`bash


Install dependencies

npm install

Generate build files

npm run build

Run tests

npm run test
``

License

MIT

[npm-version-src]: https://img.shields.io/npm/v/@unhead/react/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@unhead/react

[npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/react.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@unhead/react

[license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/unjs/unhead/blob/main/LICENSE