GitHub logoGitHub RepoNPM logoNPM Package


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 using window.CuriSideEffectTitle.


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



@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, {
  side_effects: [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"