ostrio:flow-router-title

Change document.title (page title) on the fly within flow-router


Keywords
flow-router, meteor, meteor-package, meteorjs, page-title, seo, seo-meta, title
License
BSD-3-Clause
Install
meteor add ostrio:flow-router-title@=2.0.2

Documentation

Reactive page title for Meteor and flow-router-extra

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

Important Notice: This package oriented to work with flow-router-extra. It is extended fork of kadira:flow-router.

This package supports title option defined in list below, ordered by prioritization:

  • FlowRouter.route() [overrides all]
  • FlowRouter.group()
  • FlowRouter.globals
  • <title>Text</title>[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

Demo Application:

ES6 Import:

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

Usage:

You need to initialize FlowRouterTitle class by passing FlowRouter object. Right after creating all your routes:

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

new FlowRouterTitle(FlowRouter);

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'
});

Use function context (with data hook):

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

Use group context:

var 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`
});

To change title reactively, just pass it as function:

FlowRouter.route('/me/account', {
  name: 'account',
  title: function() {
    // 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: function(params) {
    return "Page " + params.something;
  }
});

All examples above is supported to be a function or text:

  • FlowRouter.globals.push({title: function(){...}})
  • FlowRouter.globals.push({title: 'Title text'})
  • FlowRouter.group({title: function(){...}, titlePrefix: function(){...}})
  • FlowRouter.group({title: 'Title text', titlePrefix: 'Title prefix text'})
  • FlowRouter.route('/path', {title: function(){...}})
  • FlowRouter.route('/path', {title: 'Title text'})