@wildpeaks/preact-component-html

HTML Preact component

Usage no npm install needed!

<script type="module">
  import wildpeaksPreactComponentHtml from 'https://cdn.skypack.dev/@wildpeaks/preact-component-html';
</script>

README

HTML Component

Greenkeeper badge

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 to en)
  • viewport: meta viewport size (defaults to width=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>