CODEWITHSUNDEEP
reactjsreact-helmet
PBandJ
PBandJ

Reputation: 2883

What is the purpose of react-helmet?

I've created a server-side react app, where it would return html as shown below:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>A Cool Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="${ROOT}/client-bundle.js"></script>
  </body>
</html>

I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.

Upvotes: 79

Views: 97730

Answers (6)

Chad French
Chad French

Reputation: 61

I specifically use Helmet for meta tags and to also change the style of a 3rd party component that isn't editable.

        <Helmet>
          <script type="text/javascript">
            {`
            window.addEventListener('load', function () {
                    document.querySelectorAll('.noEditStars > span').forEach(span => {
                    span.style.cursor = 'pointer';
                });
            }, false);
            `}
          </script>
        </Helmet>

Upvotes: 0

Lexis Hanson
Lexis Hanson

Reputation: 857

A major benefit of react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.

For instance, if on your index page component you have:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="This is the index page description"> 
    <title>A Cool Index Page</title>
  </head>
</html>

But then on a leaf page component, you also have a <head> tag containing meta tags:

<html>
  <head>
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.

If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.

It will also contain the viewport meta tag, since it did not have to be overwritten.

Because of react-helmet, on the leaf page, the <head> would appear as follows:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" name="This is the unique leaf page description"> 
    <title>A Cool Leaf Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
</html>

Upvotes: 75

Raghav Jindal
Raghav Jindal

Reputation: 49

React Helmet is a reusable React component that will manage all of your changes to the document head.

For example, if you want to change the title and meta description of every page according to your SEO, you could do the following:

<Helmet>
    <title>Your Title</title>
    <meta name="description" content="Description of your page" />
</Helmet>

Upvotes: 4

Alberto Ruiz
Alberto Ruiz

Reputation: 376

React Helmet also allow you to modify classes outside the scope of your render function.

For example, if you want to modify your <body> tag dynamically, you could do the following: 

<Helmet>
    <body className="dynamic-class-for-body-on-this-view" />
</Helmet>

Upvotes: 4

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.

eg:

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Turbo Todo</title>
    <meta name="description" content="test on react-helmet" />
    <meta name="theme-color" content="#ccc" />
</Helmet>

Upvotes: 24

Van
Van

Reputation: 3767

Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.

Upvotes: 9

Related Questions