@unhead/solid-js

> Full-stack management for SolidJS applications

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

Features

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

Installation

``bash


npm

npm install @unhead/solid-js

yarn

yarn add @unhead/solid-js

pnpm

pnpm add @unhead/solid-js
`

Usage

$3

#### Client-side (SPA)

`jsx
import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/client'
// main.jsx
import { render } from 'solid-js/web'
import App from './App'

const head = createHead({ / config / })

render(() => (



), document.getElementById('root'))
`

#### Server-side (SSR)

`jsx
import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/server'
// entry-server.jsx
import { renderToString } from 'solid-js/web'
import App from './App'

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



))
return { html, head }
}
`

`jsx
import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/client'
// entry-client.jsx (for hydration)
import { hydrate } from 'solid-js/web'
import App from './App'

const head = createHead({ / config / })

hydrate(() => (



), document.getElementById('root'))
`

$3

`jsx
// Home.jsx
import { useHead } from '@unhead/solid-js'

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/solid-js'

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/solid-js'
// Profile.jsx
import { createEffect, createSignal } from 'solid-js'

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

// SolidJS automatically tracks reactive changes in useHead
useHead(() => ({
title: ${userName()} - Profile, // Reactive title
meta: [
{
name: 'description',
content: ${userName()}'s profile page, // Reactive description
},
],
}))

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/solid-js/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@unhead/solid-js

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

[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