PreactHeadMaster is a powerful and efficient document head manager for Preact applications. It allows you to dynamically update the <head>
section of your HTML document, including title, meta tags, and more, with ease and performance in mind.
- 🚀 Lightweight and optimized for Preact
- 🔄 Dynamic updates to document head
- 🎣 Hook-based API for easy integration
- 🖥️ Server-side rendering support with streaming capabilities
- 📦 TypeScript support
- 🏆 Priority system for managing conflicting head elements
- 🚀 Performance optimizations with memoization
- 🐛 Robust error handling and logging
- Installation
- Quick Start
- Usage
- Server-Side Rendering
- Performance Considerations
- Error Handling
- API Reference
- FAQ
- Contributing
- License
npm install preactheadmaster
# or
yarn add preactheadmaster
- Wrap your app with
HeadMasterProvider
:
import { h } from 'preact';
import { HeadMasterProvider } from 'preactheadmaster';
function App() {
return (
<HeadMasterProvider>
{/* Your app components */}
</HeadMasterProvider>
);
}
- Use the
HeadMaster
component or hooks in your components:
import { h } from 'preact';
import { HeadMaster, useTitle } from 'preactheadmaster';
function MyComponent() {
useTitle('My Page Title');
return (
<div>
<HeadMaster>
<meta name="description" content="This is my page description" />
<link rel="canonical" href="https://mysite.com/page" />
</HeadMaster>
<h1>My Component</h1>
</div>
);
}
Use the HeadMaster
component to manage your document head:
import { h } from 'preact';
import { HeadMaster } from 'preactheadmaster';
function MyComponent() {
return (
<div>
<HeadMaster>
<title>My Page Title</title>
<meta name="description" content="This is my page description" />
<link rel="canonical" href="https://mysite.com/page" />
</HeadMaster>
<h1>My Component</h1>
</div>
);
}
PreactHeadMaster provides hooks for more granular control:
import { h } from 'preact';
import { useTitle, useMeta, useLink } from 'preactheadmaster';
function MyComponent() {
useTitle('My Page Title');
useMeta([{ name: 'description', content: 'This is my page description' }]);
useLink([{ rel: 'canonical', href: 'https://mysite.com/page' }]);
return <h1>My Component</h1>;
}
PreactHeadMaster includes a priority system for managing conflicting head elements:
import { useMeta } from 'preactheadmaster';
function MyComponent() {
useMeta([
{ name: 'description', content: 'High priority description', priority: 2 },
{ name: 'description', content: 'Low priority description', priority: 1 }
]);
return <div>...</div>;
}
PreactHeadMaster supports server-side rendering with streaming capabilities:
import { renderStaticStream } from 'preactheadmaster';
import App from './App';
async function serverRender(req, res) {
res.writeHead(200, { 'Content-Type': 'text/html' });
for await (const chunk of renderStaticStream(App)) {
res.write(chunk);
}
res.end();
}
PreactHeadMaster is designed with performance in mind:
- Uses memoization to prevent unnecessary re-renders
- Implements a priority system for efficient management of conflicting head elements
- Supports streaming SSR for faster time-to-first-byte
PreactHeadMaster includes robust error handling:
- Centralized error logging for easier debugging
- Graceful handling of runtime errors to prevent app crashes
For a complete API reference, please see our API Documentation.
For answers to common questions, please check our FAQ.
We welcome contributions! Please see our Contributing Guide for more details.
PreactHeadMaster is MIT licensed.