Helmet is a React component that allows us to manage all of the changes to the document head. For example, let's say we're doing a social network. On the main page we may want the website title something like "My Social Network", but if we go to a user's profile the title should look like this: "User's name/Id - My Social Network".

Usage example

import React from 'react';
import { Helmet } from 'react-helmet';
import { Switch, Route } from 'react-router-dom';

import PageOne from 'containers/PageOne';
import PageTwo from 'containers/PageTwo';

const App = () => (
  <div className="app">
    <Helmet>
      <title>My App</title>
      <meta charSet="utf-8" />
      <meta name="description" content="A React.js application" />
    </Helmet>
    <Switch>
      <Route exact path="/" component={PageOne} />
      <Route path="/page-2" component={PageTwo} />
    </Switch>
  </div>
);

export default App;

Here's an example of a very basic app. As we can see, the title of the page will be My App. But this app has different routes. Let's say we want to change the title and the description for the /page-2 route, but we want to maintain the charset encoding. We can easily do it like this:

import React from 'react';
import { Helmet } from 'react-helmet';

export default class PageTwo extends React.Component {
  <div className="page-two">
    <Helmet>
      <title>Page 2</title>
      <meta name="description" content="This is a different description for this route." />
    </Helmet>
    <h1>Page 2</h1>
  </div>
);

As we only defined the title and the description in this second component, they'll be the only two values overwritten from the app itself. The charset won't change as we didn't define a new one.

The output title of this example is: Page 2

Using templates and default title

We can go a step ahead and make use of the properties that Helmet provides to us. For example the titleTemplate and the defaultTitle. We'll repeat the example above but now we'll establish these two props in the App's head.

import React from 'react';
import { Helmet } from 'react-helmet';

const App = () => (
  <div className="app">
    <Helmet titleTemplate="%s - My App" defaultTitle="My App">
      <meta name="description" content="A React.js aapplication" />
    </Helmet>
    <h1>My App</h1>
  </div>
);

export default App;

At this point, if we change to another component and we don't change the title, as the default title is My App this will be the output. Let's change it with the PageTwo component like before.

import React from 'react';
import { Helmet } from 'react-helmet';

export default class PageTwo extends React.Component {
  <div className="page-two">
    <Helmet>
      <title>Page 2</title>
      <meta name="description" content="This is a different description for this route." />
    </Helmet>
    <h1>Page 2</h1>
  </div>
);

Now the output title will be Page 2 - My App since we established the template. The %s is substituted by the string we pass on the title tag.

This is a very easy tutorial but I think it's very helpful for those who didn't know this component. Hope you enjoyed it! If you have any doubt leave it in the comments below. You can read the whole documentation in their Github.