Reactive page title

Change document.title on the fly within flow-router-extra.

Features:

• 100% tests coverage;
• Per route, per group, and default (all routes) title tag.

Various ways to set title, ordered by prioritization:

• FlowRouter.route() [overrides all below]
• FlowRouter.group()
• FlowRouter.globals
• Head template <title>Text</title> tag [might be overridden by any above]

Install:

meteor add ostrio:flow-router-title

Demos / Tests:

• Demo source
• Tests

ES6 Import:

import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';

Related Packages:

• flow-router-meta - Per route meta tags, script and link (CSS), set per-route stylesheets and scripts
• flow-router-extra - Carefully extended FlowRouter

Usage:

Initialize FlowRouterTitle class by passing FlowRouter object. Right after creating all routes:

FlowRouter.route('/', {
  action() { /* ... */ },
  title: "Title"
  /* ... */
});

new FlowRouterTitle(FlowRouter);

Set title via Route

Set title property in route's or group's configuration:

// Set default document.title value in 
// case router has no title property
FlowRouter.globals.push({
  title: 'Default title'
});

FlowRouter.route('/me/account', {
  name: 'account',
  title: 'My Account'
});

.set() method

Set document.title during runtime (without route(s)):

FlowRouter.route('/', {/* ... */});

const titleHandler = new FlowRouterTitle(FlowRouter);
// `.set()` method accepts only String
titleHandler.set('My Awesome Title String'); // <- Returns `true`
titleHandler.set(() => { return 'Wrapped title'; }); // <- Returns `false`, as function can't be set into the `document.title`

Function context

Use function context (with data hook):

FlowRouter.route('/post/:_id', {
  name: 'post',
  waitOn(params) {
    return [Meteor.subscribe('post', params._id)];
  },
  data(params) {
    return Collection.Posts.findOne(params._id);
  },
  title(params, query, data) {
    if (data == null) {
      data = {};
    }
    if (data) {
      return data.title;
    } else {
      return '404: Page not found';
    }
  }
});

Group context

Use group context:

const account = FlowRouter.group({
  prefix: '/account',
  title: "Account",
  titlePrefix: 'Account > '
});

account.route('/', {
  name: 'accountIndex' // Title will be `Account`
});

account.route('/settings', {
  name: 'AccountSettings',
  title: 'My Settings' // Title will be `Account > My Settings`
});

Reactive data sources

To change title reactively, just pass it as function:

FlowRouter.route('/me/account', {
  name: 'account',
  title() {
    // In this example we used `ostrio:i18n` package
    return i18n.get('account.document.title'); 
  }
});

// Use params from route
FlowRouter.route('/page/:something', {
  name: 'somePage',
  title(params) {
    return "Page " + params.something;
  }
});

More examples

In all examples below title can be a Function or String:

FlowRouter.globals.push({
  title() {/* ... */} // <-- Suitable for reactive data source
});

FlowRouter.globals.push({
  title: 'Title text'
});

FlowRouter.group({
  title() {/* ... */}, // <-- Suitable for reactive data source
  titlePrefix() {/* ... */} // <-- Can accept reactive data source, but won't trigger re-computation
});

FlowRouter.group({
  title: 'Title text',
  titlePrefix: 'Title prefix text'
});

FlowRouter.route('/path', {
  title() {/* ... */} // <-- Reactive
});

FlowRouter.route('/path', {
  title: 'Title text'
});

Support this project:

This project wouldn't be possible without ostr.io.

Using ostr.io you are not only protecting domain names, monitoring websites and servers, using Prerendering for better SEO of your JavaScript website, but support our Open Source activity, and great packages like this one could be available for free.