Need help with react-title-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ryanflorence
124 Stars 11 Forks MIT License 5 Commits 8 Opened issues

Description

Nested document title management for React.js

Services available

!
?

Need anything else?

Contributors list

No Data

React Title Component

Nested document title management for React.

Installation

Using npm:

$ npm install react-title-component

Then with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

// using an ES6 transpiler, like babel
import Title, { flushTitle } from 'react-title-component'

// not using an ES6 transpiler var ReactTitle = require('react-title-component') var Title = ReactTitle.default var flushTitle = ReactTitle.flushTitle

The UMD build is also available on npmcdn:


You can find the library on

window.ReactTitle
.

Usage

// `document.title` will now be "My Title"

That's nice, but the idea is that you don't want just one component participating in the title of the document. As nested components come in and out of the UI, you often want to append (or prepend) to the current title.

// First instance of `Title`


// Lower in the view hierarchy, another Title is rendered. // If you pass it a function you'll get the previous title's value, // so you can append, prepend, or ignore it.

`${previousTitle} - More Title`}/> <p>// the title, if both of those are rendered, will be: // "My Title - More Title"</p>

It ends up looking something like this:

import React from 'react'
import { render } from 'react-dom'
import Title from 'react-title-component'

const App = React.createClass({

render() { return (

{/* ... */}
) }

})

const DeeperPage = React.createClass({

getInitialState() { return { profile: null } },

componentDidMount() { fetchProfile(profile => this.setState({ profile })) },

render() { // because it's a component, it gets to participate in the render // lifecycle, updating the title as state changes... const { profile } = this.state const title = profile ? 'Loading...' : profile.fullName return (

<code>More Stuff | ${title}</code>}/> {/* ... */}

) }

})

If you're using React Router, you probably want all of your route components to add something to the title.

Server Rendering

import { flushTitle } from 'react-title-component'
import { renderToString } from 'react-dom/server'

const markup = renderToString() // App has some Titles in it. const title = flushTitle() // returns the title and gets ready for the // next request

renderFullPageHoweverYouDoIt(markup, title)

Caveat

There is one caveat: You can't be removing titles from the middle of the chain. In other words, make sure that if your component renders a

Title
, it always renders a Title.
// GOOD
render() {
  return (
    
`${prev} | stuff`}/>
) }

// BAD render() { return (

{!this.state.screwUpTheTitleLib && ( <code>${prev} | stuff</code>}/> )}

) }

This could cause a title in the middle of the "title chain" to be removed and then screw everything else up, the code makes assumptions based on the order they get rendered.

This could be worked around, but it seems like a strange use-case that would complicate the code a bit.

Enjoy!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.