Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

More complex title templates

See original GitHub issue

Feature request

In my application I have a top-level Helmet component which renders the default title, twitter and open graph meta tags. I have pages, each of which renders a Helmet component with some custom text, and I have a global Navbar which has the state of the unread notifications which I want to display in the title.

Essentially, I want my title to look like this: (1) Subpage | MyApp.

The issue is that the title template doesn’t allow me to have custom titles from the pages and also the unread notification count, so it’d show either Subpage | MyApp or (1) | MyApp, but I can’t have both 😢

Is there a way we could adapt the API to make more complex title theming possible? Would be happy to submit a PR if I get some pointers, or maybe I am missing some existing feature that makes this possible?

Issue Analytics

State:
Created 6 years ago
Reactions:16
Comments:12 (2 by maintainers)

Top GitHub Comments

10reactions

jduthoncommented, Sep 26, 2017

Would be really interested in this as well, my use case is slightly simpler (I would like nested titleTemplate so my page title can be “Nested | Child | MainTitle”) which comes from something like :

<div>
  <Helmet titleTemplate="%s | MainTitle"` defaultTitle="MainTitle" />
  <child>
    <Helmet titleTemplate="%s | Child" defaultTitle="Child" />
    <nested>
      <Helmet title="Nested" />
    </nested>
  </child>
</div>

6reactions

tajocommented, Apr 8, 2018

@mxstbr @jaysoo Hey, I just published a tiny library react-titled that supports more complex nesting. It uses the new context API that comes with React 16.3.

You can use it as

import { Titled } from 'react-titled';

<Titled title={() => 'Example.com'}>
  <h1>Welcome!</h1>
  <Titled title={title => `Homepage | ${title}`} />
</Titled>;

outputs

Homepage | Example.com

Hope you find it useful. 😃

react-helmet is still really great for other <head> tags where composing is not needed. I think it doesn’t make sense to dramatically change react-helmet’s API to support that so I’ve create a new lib.

Top Results From Across the Web

16 Free Premiere Pro Title Templates Perfect for Any Video

Download modern, colorful & animated Premiere Pro Title templates by Motion ... What's more, it's fully editable and comes with fonts too!

Premiere Pro Title Templates - What They Are & How To Use

A selection of Premiere Pro title templates from Envato Elements ... When you've covered these, move on to more complicated techniques like adding...

Designer Titles - After Effects Template - RocketStock

Creating really nice typography is difficult. Designer Titles makes ... Designer Titles takes a more mature, restrained approach. It's your go-to title pack ......

How can I make more complex templates? : r/kdenlive - Reddit

I made the video, but don't know a way to make the text configurable if I add this to another file (similar to...

Create a title template in Motion - Apple Support

In Motion, the Final Cut Title template creates a custom title that can be applied to clips in the Final Cut Pro timeline....