Set-head NPM | npm.io

Framework agnostic, isomorphic <head> updating and rendering utility.

Installation

npm install set-head

Example

import Head from 'set-head'

// Create a new head element, this should be done once per request.
const head = new Head()

// Add elements to head via method chaining.
head
  .meta({ charset: 'utf8' })
  .title('My App')
  .base({ href: '/admin/' })
  .meta({ name: 'description' content: 'Cool stuff' })
  .link({ rel: 'stylesheet', href: 'index.css' })
  .script({ async: true, src: 'index.js' })

// You can also set attributes on the html and body elements.
head
  .html({ lang: 'en' })
  .body({ class: 'loading' })

Overriding

set-head makes overriding default header elements easy. If you invoke head again later it will replace any existing similar element. The module uses special keying scheme found in ./src/base.js under const KEYS to understand which elements to replace and which to add.

For the html and body any provided attributes are merged (properties are not concatenated).

// Setting defaults somewhere (perhaps in a middleware or plugin.)
head
  .title('My App')
  .meta({ name: 'author', content: 'Dylan Piercey' })
  .meta({ name: 'description', content: 'Welcome to the site' })
  .link({ rel: 'stylesheet', href: 'index.css' })

// The later in a specific route you can continue chaining like so to override.
head
  .title('My App > My sub page')
  .meta({ name: 'description', content: 'Sub page description' })

// And then if we render we get (formatted for clarity)
head.renderToString().head === html`
  <title>My App > My sub page</title>
  <meta name="author" content="Dylan Piercey">
  <meta name="description" content="Sub page description">
  <link rel="stylesheet" href="index.css">
`

Browser Rendering

To render to the browser, simply invoke 'render' after all of the head elements have been set.

head.render()

Server Rendering

Server side rendering is accomplished by invoking renderToString after all of the head elements have been set.

export default (req, res) => {
  const parts = head.renderToString()
  res.end(`
    <!doctype html>
    <html${parts.htmlAttributes}>
      <head>${parts.head}</head>
      <body${parts.bodyAttributes}>
        ...
      </body>
    </html>
  `)
}