HTML Component
Stateless HTML5 Preact component, useful for static rendering full pages.
Install:
npm install @wildpeaks/preact-component-html
Component props:
-
title: page title -
js: JS code embedded directly -
css: CSS code embedded directly -
scripts: async external scripts -
stylesheets: external stylesheets -
favicon: URL of the favicon image -
canonical: Absolute URL of the current page -
lang: language identifier (defaults toen) -
viewport: meta viewport size (defaults towidth=device-width, initial-scale=1, shrink-to-fit=no)
Example:
const render = require('preact-render-to-string');
const HTML = require('@wildpeaks/preact-component-html');
const stylesheets = [
'styles.css',
'https://cdn.example.com/webfont.css'
];
render(
<HTML title="Header title" scripts={['script1.js', 'script2.js']} stylesheets="styles.css">
<article>
<h1>Title of the article</h1>
<p>Hello World</p>
</article>
</HTML>
);Children elements are placed in the <body> (except <meta>, <style>, and <link> tags that get added to the <head>):
<HTML title="Example page" canonical="https://www.example.com/">
<link rel="alternate" href="https://fr.example.com/" hreflang="fr"/>
<p>Hello world</p>
</HTML>