preactheadmaster

v1.0.0

Published

4 months ago

A powerful document head manager for Preact applications

Downloads

0High
0Medium
0Low

jameswilliamquinn2018

preact head document management seo

PreactHeadMaster

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.

Features

🚀 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

npm install preactheadmaster

# or

yarn add preactheadmaster

Quick Start

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>
  );
}

Usage

Basic Usage

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>
  );
}

Hook-based Usage

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>;
}

Priority System

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>;
}

Server-Side Rendering

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();
}

Performance Considerations

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

Error Handling

PreactHeadMaster includes robust error handling:

Centralized error logging for easier debugging
Graceful handling of runtime errors to prevent app crashes

API Reference

For a complete API reference, please see our API Documentation.

FAQ

For answers to common questions, please check our FAQ.

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

PreactHeadMaster is MIT licensed.