DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Intro to React Helmet

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.


With npm:

$ npm install --save react-helmet


  • 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">
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="" />
Enter fullscreen mode Exit fullscreen mode

Nested or latter components will override duplicate changes:

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

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


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

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


Discussion (0)