❤
npm
Sign UpSign In

preact-head-tag

0.2.0 • Public • Published

A very tiny SSR-compatible head component for Preact using preact-portal.

It's around 1.5 kB including preact-portal and only ~500 bytes by itself.

Heavily inspired by react-head by tizmagic.

Installation

npm install preact-head-tag

Usage

Client

import { h, Component } from "preact";
import HeadTag from "preact-head-tag";
 
const HelloWorld = () => (
  <div>
    <HeadTag tag="title">About this website</HeadTag>
    <HeadTag tag="meta" name="example" content="whatever" />
    <h1>Hello world!</h1>
  </div>
);
// Alternatively you can use the following components for convenience:
import { Title, Meta, Style, Link } from "preact-head-tag";
 
const HelloWorld = () => (
  <div>
    <Title>About this website</Title>
    <Meta name="example" content="whatever" />
    <h1>Hello world!</h1>
  </div>
);

Server

import { h } from "preact";
import renderToString from "preact-render-to-string";
import { TagCollector } from "preact-head-tag/server";
 
const headTags = [];
 
// Wrap you App component in the TagCollector
const app = renderToString(
  <TagCollector headTags={headTags}>
    <App />
  </TagCollector>
);
 
// Put the extracted headTags inside the head of the html.
// headTags is an array of strings so use headTags.join("")
res.send(`
  <!doctype html>
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      ${headTags.join("")}
    </head>
    <body>
      <div id="root">${app}</div>
    </body>
  </html>
`);

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i preact-head-tag

Repository

github.com/markusenglund/preact-head-tag

Homepage

github.com/markusenglund/preact-head-tag#readme

Weekly Downloads

4

Version

0.2.0

License

MIT

Unpacked Size

103 kB

Total Files

7

Last publish

Collaborators

  • yogaboll
Try on RunKit
Report malware