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 store={store} url={req.url} />
  </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

Keywords

FAQs

What is preact-head-tag?

Is preact-head-tag popular?

Is preact-head-tag well maintained?

Package last updated on 09 Jun 2018

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.

Install

preact-head-tag

Installation

Usage

Client

Server

License

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation