Stable

React HTML

A common layout component for use in nib apps. Ensures you are loading the appropriate google fonts, configuring google analytics and optimizely, server side renders styled components style tags, serializes and passes config and state from server to client and provides you with some SEO basics.

GitHub, opens in a new tab·Storybook, opens in a new tab

Installation

bash

npm install @nib-components/react-html

Usage

jsx

import express from 'express';
import React from 'react';
import {renderToStaticMarkup} from 'react-dom/server';
import createHtml from '@nib-components/react-html';

const app = express();

const Html = createHtml({
  config,
  script: ['vendor.js', 'client.js'],
  style: ['client.css'],
  revManifestPath: {
    prefix: '/health-insurance/quote/public',
    manifest: './dist/rev-manifest.json'
  },
  googleTagManagerId: process.env.GTM_ID || 'GTM-XXXXXX'
});

app.get('/', (req, res) => {
  res.send(
    renderToStaticMarkup(
      <Html>
        <h1>Hello World!</h1>
      </Html>
    )
  );
});

Options

Option	Type	Default	Description
`static`	boolean	`false`	Render the `children` with `ReactDOM.renderToStaticMarkup()` instead of `ReactDOM.renderToString()`.
`title`	string		The page title. Uses `react-helmet` if unspecified.
`description`	string		The meta description.
`canonical`	string		The canonical URL.
`favicon`	string		The favicon URL. Defaults to `https://static.nib.com.au/images/nib/favicon.svg`.
`script`	string or array	`null`	The path(s) of a script or an array of scripts.
`style`	string or array	`null`	The path(s) of a style or an array of styles.
`revManifestPath`	object		Configuration for rev-manifest-path
`config`	object		The application config which will be passed to the client loaded at `window.__CONFIG__`.
`googleTagManagerId`	string		The GTM ID. Determines whether the GTM script is enabled.
`optimizely`	boolean or object	`false`	Whether the Optimizely script is enabled. Can use a non-default id by setting to `{ optimizelyId: '123'}`
`gatsby`	boolean	`false`	Whether the site is a gatsby site.
`disableInternalReactHelmet`	boolean	`false`	Do not include any `react-helmet` calls if true. You will likely want to set this to true if you are using `gatsby-plugin-react-helmet` to avoid duplicate head tags.

Gatsby options

To use this package with Gatsby we need to customise the html.js file as outlined in their docs. This is not something Gatsby recommend so we should look to improve our approach.

If you are building a site with Gatsby then props.gatsby should be set to true and the following additional props are expected by gatsby:

Option	Type	Description
`body` (required)	object	Gatsby provides
`bodyAttributes` (required)	object	Attributes to be spread onto the `<body>` element.
`headComponents` (required)	array	Components to be added to document `<head>`.
`htmlAttributes` (required)	object	Attributes to be spread onto the `<html>` element.
`preBodyComponents` (required)	array	Components to be added at the beginning of the document `<body>`.
`postBodyComponents` (required)	array	Components to be added at the end of the document `<body>`.

These props are all passed to your html.js by Gatsby and you must pass them through to the createHtml function. Here's a real example taken from our static-site-starter of how this might look:

jsx

const HTML = props => {
  const {body, bodyAttributes, children, headComponents, htmlAttributes, postBodyComponents, preBodyComponents} = props;

  const Html = createHtml({
    body,
    bodyAttributes,
    gatsby: true,
    headComponents,
    htmlAttributes,
    postBodyComponents,
    preBodyComponents,
    config
  });

  return <Html state={props}>{children}</Html>;
};

Considerations

This package was created as something of a boilerplate to help us build pages and universal apps quickly. At the time we were using tradie but have since moved on to more highly-adopted tooling. Largely for static sites we now use Gatsby and this package has been updated to work with that framework. Apps built using NextJS or Create React App may have their own solution to this and may not be able to or need to use this package.

Static site starter