Design Tokens for Mesh have just been released!
Skip to content

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.

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

OptionTypeDefaultDescription
staticbooleanfalseRender the children with ReactDOM.renderToStaticMarkup() instead of ReactDOM.renderToString().
titlestringThe page title. Uses react-helmet if unspecified.
descriptionstringThe meta description.
canonicalstringThe canonical URL.
faviconstringThe favicon URL. Defaults to https://static.nib.com.au/images/nib/favicon.svg.
scriptstring or arraynullThe path(s) of a script or an array of scripts.
stylestring or arraynullThe path(s) of a style or an array of styles.
revManifestPathobjectConfiguration for rev-manifest-path
configobjectThe application config which will be passed to the client loaded at window.__CONFIG__.
googleTagManagerIdstringThe GTM ID. Determines whether the GTM script is enabled.
optimizelyboolean or objectfalseWhether the Optimizely script is enabled. Can use a non-default id by setting to { optimizelyId: '123'}
gatsbybooleanfalseWhether the site is a gatsby site.
disableInternalReactHelmetbooleanfalseDo 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:

OptionTypeDefaultDescription
body (required)objectGatsby provides
bodyAttributes (required)objectAttributes to be spread onto the <body> element.
headComponents (required)arrayComponents to be added to document <head>.
htmlAttributes (required)objectAttributes to be spread onto the <html> element.
preBodyComponents (required)arrayComponents to be added at the beginning of the document <body>.
postBodyComponents (required)arrayComponents 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.