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]

This package tested and works like a charm with most common Meteor's packages:

Install:

meteor add ostrio:flow-router-title

Demos / Tests:

Source
Tests

ES6 Import:

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

Usage:

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

1FlowRouter.route('/', {
2  action() { /* ... */ },
3  title: "Title"
4  /* ... */
5});
6
7new FlowRouterTitle(FlowRouter);

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

1// Set default document.title value in 
2// case router has no title property
3FlowRouter.globals.push({
4  title: 'Default title'
5});
6
7FlowRouter.route('/me/account', {
8  name: 'account',
9  title: 'My Account'
10});

Use function context (with data hook):

1FlowRouter.route('/post/:_id', {
2  name: 'post',
3  waitOn(params) {
4    return [Meteor.subscribe('post', params._id)];
5  },
6  data(params) {
7    return Collection.Posts.findOne(params._id);
8  },
9  title(params, query, data) {
10    if (data == null) {
11      data = {};
12    }
13    if (data) {
14      return data.title;
15    } else {
16      return '404: Page not found';
17    }
18  }
19});

Use group context:

1const account = FlowRouter.group({
2  prefix: '/account',
3  title: "Account",
4  titlePrefix: 'Account > '
5});
6
7account.route('/', {
8  name: 'accountIndex' // Title will be `Account`
9});
10
11account.route('/settings', {
12  name: 'AccountSettings',
13  title: 'My Settings' // Title will be `Account > My Settings`
14});

To change title reactively, just pass it as function:

1FlowRouter.route('/me/account', {
2  name: 'account',
3  title() {
4    // In this example we used `ostrio:i18n` package
5    return i18n.get('account.document.title'); 
6  }
7});
8
9// Use params from route
10FlowRouter.route('/page/:something', {
11  name: 'somePage',
12  title(params) {
13    return "Page " + params.something;
14  }
15});

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

1FlowRouter.globals.push({
2  title() {/* ... */}
3});
4
5FlowRouter.globals.push({
6  title: 'Title text'
7});
8
9FlowRouter.group({
10  title() {/* ... */},
11  titlePrefix() {/* ... */}
12});
13
14FlowRouter.group({
15  title: 'Title text',
16  titlePrefix: 'Title prefix text'
17});
18
19FlowRouter.route('/path', {
20  title() {/* ... */}
21});
22
23FlowRouter.route('/path', {
24  title: 'Title text'
25});

Support this project:

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

By 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 are available for free.