@curi/side-effect-title

Installation

The package can be installed through npm (you need to have Node & NPM installed).

npm install @curi/side-effect-title

Prefer inline scripts? A full (.umd.js) and minified (.min.js) script is available for every version through Unpkg. You can access the package's exports through window.CuriSideEffectTitle.

About

This package adds a side effect to the router that updates the page's title as a result of navigation.

API

titleEffect

@curi/side-effect-title exports a function for creating a side effect that will update the page's title whenever a new response is created.

When creating the title side effect, you pass it a function. That function will be passed the object emitted by the router (with response, navigation, and router properties). The function returns a string, which the side effect will set as the document's title.

import { curi } from '@curi/router';
import titleEffect from '@curi/side-effect-title';

const setTitle = titleEffect(({ response }) => {
  return `${response.title} | My Site`;
});

const router = curi(history, routes, {
  sideEffects: [setTitle]
});

While you can use any properties of the response to generate the string, the response.title property is intended to be used with this side effect.

{
  name: "About",
  path: "about",
  response() {
    return {
      body: Home,
      title: "About"
    }
  }              
}
// when the About route matches, document.title = "About | My Site"