wildpeaks / 2019-package-preact-component-html

[ARCHIVED] HTML Preact component

Home Page:https://www.npmjs.com/package/@wildpeaks/preact-component-html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HTML Component

Github Release

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>

About

[ARCHIVED] HTML Preact component

https://www.npmjs.com/package/@wildpeaks/preact-component-html

License:MIT License


Languages

Language:JavaScript 100.0%