preact-head-tag
Advanced tools
A tiny ssr-compatible preact component for managing head with preact-portal
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.
npm install preact-head-tag
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>
);
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>
`);
MIT
FAQs
A tiny ssr-compatible preact component for managing head with preact-portal
The npm package preact-head-tag receives a total of 0 weekly downloads. As such, preact-head-tag popularity was classified as not popular.
We found that preact-head-tag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.