Features

Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").

Callback for tracking DOM changes.

Installation

npm install --save preact-helmet

Server Usage

To use on the server, call rewind() after using render from preact-render-to-string
to get the head data for use in your prerender.

Because this component keeps track of mounted instances, you have to make sure to call rewind on server, or you'll get a memory leak.

import{render}from'preact-render-to-string'

importHelmetfrom'preact-helmet'

constmarkup=renderToString(<MyApp />);

consthead=Helmet.rewind();

// populate some document template using `markup` and `head`

consthtml=`

<!doctype html>

<html>

<head>

${head.title.toString()}

${head.meta.toString()}

${head.link.toString()}

</head>

<body>

<div id="content">

${markup}

</div>

</body>

</html>

`;

head contains the following properties:

htmlAttributes

title

base

meta

link

script

noscript

style

Each property contains toComponent() and toString() methods. Use whichever is appropriate
for your environment. For htmlAttributes, use the JSX spread operator on the object returned
by toComponent(). E.g:

As string output

consthtml=`

<!doctype html>

<html ${head.htmlAttributes.toString()}>

<head>

${head.title.toString()}

${head.meta.toString()}

${head.link.toString()}

</head>

<body>

<div id="content">

${markup}

</div>

</body>

</html>

`;

As Preact components

If you are doing server side rendering with Preact, it may be easier to render the
document template with Preact as well: