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.
npm install react-helmetVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic usage of React Helmet to set document head tags like `meta`, `title`, and `link` within a functional React component.
For v6.0.0, always use `import { Helmet } from 'react-helmet'`. For v6.1.0 and later, both named and default imports are supported.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.
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.
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.After rendering your React application to a string, add `const helmet = Helmet.renderStatic();` to clear Helmet's state and prevent memory accumulation across requests.
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.