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:
ES6 Import:
1import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';
Related Packages:
- flow-router-meta - Per route
meta
tags,script
andlink
(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:
1FlowRouter.route('/', { 2 action() { /* ... */ }, 3 title: 'Title' 4 /* ... */ 5}); 6 7new 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:
1FlowRouter.globals.push({ 2 title() {/* ... */} // <-- Suitable for reactive data source 3}); 4 5FlowRouter.globals.push({ 6 title: 'Title text' 7}); 8 9FlowRouter.group({ 10 title() {/* ... */}, // <-- Suitable for reactive data source 11 titlePrefix() {/* ... */} // <-- Can accept reactive data source, but won't trigger re-computation 12}); 13 14FlowRouter.group({ 15 title: 'Title text', 16 titlePrefix: 'Title prefix text' 17}); 18 19FlowRouter.route('/path', { 20 title() {/* ... */} // <-- Reactive 21}); 22 23FlowRouter.route('/path', { 24 title: 'Title text' 25});
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.