preact-head-tag
Advanced tools
Readme
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
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.