React Helmet

6.1.0 · active · verified Sun Apr 19

React Helmet is a versatile React component designed to manage and manipulate the document head (`<head>`) of web pages. It enables developers to declaratively define metadata like titles, meta tags, link tags, script tags, and more directly within their component tree. The current stable version is 6.1.0, which re-introduced the default export pattern alongside the named export. While there's no strict release cadence, the project is actively maintained with updates addressing compatibility and feature enhancements. A key differentiator is its straightforward API that accepts plain HTML tags and its ability to handle server-side rendering, ensuring that the correct head elements are generated for initial page loads. It automatically handles nested components, where later or deeper components override duplicate head changes, simplifying SEO and page-specific metadata management.

Common errors

```
TypeError: (0, react_helmet_1.default) is not a function
```
cause Attempting to use `import Helmet from 'react-helmet'` when on `react-helmet@6.0.0`, which only supported named exports.

fix Change your import statement to `import { Helmet } from 'react-helmet'`. If you are on `6.1.0` or later, both default and named imports are supported, so check your package version.
```
Memory leak reported in server-side rendering environment.
```
cause The `Helmet.renderStatic()` method was not called after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup` on the server.

fix After rendering your React application to a string, add `const helmet = Helmet.renderStatic();` to clear Helmet's state and prevent memory accumulation across requests.
```
Warning: Using deprecated Helmet API. Consider migrating to the new API.
```
cause You are passing props like `titleTemplate` directly to the Helmet component, which is part of the older API that will be deprecated.

fix Refactor your Helmet usage to pass plain HTML tags as children. For example, instead of a `titleTemplate` prop, define the full `<title>` tag content directly.

Warnings

breaking Version 6.0.0 removed the default export for Helmet, requiring a named import `import { Helmet } from 'react-helmet'`. This was re-introduced in v6.1.0, allowing `import Helmet from 'react-helmet'` again, but users on exactly v6.0.0 will encounter issues with default imports.
Fix: For v6.0.0, always use `import { Helmet } from 'react-helmet'`. For v6.1.0 and later, both named and default imports are supported.
gotcha When performing server-side rendering (SSR), it is crucial to call `Helmet.renderStatic()` after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup`. Failure to do so will result in a memory leak on the server as Helmet keeps track of mounted instances.
Fix: Ensure `Helmet.renderStatic()` is explicitly called after rendering your React application to a string on the server to clear Helmet's internal state for each request.
deprecated In v5.0.0, a new simplified API was introduced. Directly passing Helmet props like `titleTemplate`, `defaultTitle`, `onChangeClientState`, and `encodeSpecialCharacters` is still backward-compatible but will be deprecated in future versions. The recommended approach is to use plain HTML tags as children.
Fix: Migrate to the new API by passing plain HTML tags (e.g., `<title>`, `<meta>`) as children to the `<Helmet>` component instead of using props. Refer to the README for updated examples.

Install

npm install react-helmet npm
yarn add react-helmet yarn
pnpm add react-helmet pnpm

Imports

Helmet
wrong:
```
import { Helmet } from 'react-helmet'
```
correct:
```
import Helmet from 'react-helmet'
```
As of v6.1.0, both default and named exports for Helmet are available. Prior to v6.1.0 (specifically v6.0.0), only named export was supported.
Helmet (named)
wrong:
```
import Helmet from 'react-helmet'
```
correct:
```
import { Helmet } from 'react-helmet'
```
This named export pattern works for v6.0.0 and later versions, including the current v6.1.0. For v6.0.0, this was the *only* correct way to import Helmet.

Helmet.renderStatic

wrong:

const helmet = Helmet.renderStatic(); // without calling ReactDOMServer.renderToString first

correct:

import { Helmet } from 'react-helmet'; /* ... renderToString ... */ const helmet = Helmet.renderStatic();

Used for server-side rendering to extract head data after components have rendered to string. Must be called after `ReactDOMServer.renderToString`.

Quickstart

Demonstrates basic usage of React Helmet to set document head tags like `meta`, `title`, and `link` within a functional React component.

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

function MyPage() {
  return (
    <div className="application">
      <Helmet>
        <meta charSet="utf-8" />
        <title>My Awesome Page Title</title>
        <link rel="canonical" href="https://mysite.com/current-page" />
        <meta name="description" content="A detailed description of my awesome page." />
        <meta property="og:title" content="Open Graph Title" />
        <meta property="og:description" content="Open Graph Description" />
        <meta property="og:image" content="https://mysite.com/image.jpg" />
      </Helmet>
      <h1>Welcome to my application!</h1>
      <p>This content is part of the page body.</p>
    </div>
  );
}

export default MyPage;

view raw JSON →