DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Intro to React Helmet

#react

I came upon a react component called React Helmet that eases the manageability of a document's head section. It is social media friendly in that it combines server-side rendering and React Helmet itself and makes a dynamic duo for creating apps. React Helmet uses HTML tags and is very simple to use.

Installation

With npm:

$ npm install --save react-helmet

Features

  • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
  • Supports attributes for body, html and title tags.
  • Supports server-side rendering.
  • Nested components override duplicate head changes.
  • Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
  • Callback for tracking DOM changes.

Example of Use

Import Helmet at the top:

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

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

Nested or latter components will override duplicate changes:

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>
Enter fullscreen mode Exit fullscreen mode

outputs:

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>
Enter fullscreen mode Exit fullscreen mode

Read more about React Helmet on Github for the full documentation.

References

Top comments (0)