Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

ostrio:flow-router-title

v3.3.0•Published 9 months ago

support support

Reactive page title

Change document.title on the fly in Meteor.js apps via flow-router-extra API.

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:

ES6 Import:

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

Usage:

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

1import { FlowRouter }      from 'meteor/ostrio:flow-router-extra';
2import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';
3
4FlowRouter.route('/', {
5  action() { /* ... */ },
6  title: 'Title'
7  /* ... */
8});
9
10new FlowRouterTitle(FlowRouter);

Set title via Route

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

.set() method

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

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

Function context

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 Collections.Posts.findOne(params._id);
8  },
9  title(params, query, data) {
10    if (data) {
11      return data.title;
12    }
13    return '404: Page not found';
14  }
15});

Group context

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

Reactive data sources

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

More examples

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

1import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
2
3FlowRouter.globals.push({
4  title() {/* ... */} // <-- Suitable for reactive data source
5});
6
7FlowRouter.globals.push({
8  title: 'Title text'
9});
10
11FlowRouter.group({
12  title() {/* ... */}, // <-- Suitable for reactive data source
13  titlePrefix() {/* ... */} // <-- Can accept reactive data source, but won't trigger re-computation
14});
15
16FlowRouter.group({
17  title: 'Title text',
18  titlePrefix: 'Title prefix text'
19});
20
21FlowRouter.route('/path', {
22  title() {/* ... */} // <-- Reactive
23});
24
25FlowRouter.route('/path', {
26  title: 'Title text'
27});

Running Tests

  1. Clone this package
  2. In Terminal (Console) go to directory where package is cloned
  3. Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-title-tests" meteor test-packages ./ --port 8888

Support this project: