Dynamic document head with React Helmet
Tags: javascript, react, html
Published: 2019-03-07 19:18:47

---
title: Dynamic document head with React Helmet
published: true
description: How to change the document head dynamically with the React component Helmet.
tags: javascript, react, html
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lmpe4ztts3lbpztmxmu4.jpg
---

**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

```javascript
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:

```javascript
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.

```javascript
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.

```javascript
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](https://github.com/nfl/react-helmet).