React Helmet
A React component that manages changes to the page's head section (title, meta, link tags).
- Stars
- 17.4k
- Forks
- 637
- Licence
- MIT
- Language
- JavaScript
- Last update
- 3.3 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
React Helmet is a React component you drop into your app to set things in the page's head, such as the title, meta description, canonical link, or scripts. You write ordinary HTML head tags inside a Helmet component, and it updates the document head to match, with nested components overriding duplicates. It also supports server-side rendering by letting you pull the head data out after rendering.
- Set a different page title and meta description for each route
- Add a canonical link tag to a page
- Use a titleTemplate to append a site name to every page title
- Output head tags as an HTML string during server-side rendering
Great for
- React developers who need per-page titles and meta tags
- Teams building server-rendered React apps that need head tags in the initial HTML
- Beginners who want a simple way to change the document head
Not ideal for
- Projects not using React, since the component is built for React
- Apps that need the server-side API to stay current with newer React versions, since the README does not clearly state current React support and the last push was in July 2023
How to get it
- 1
Install with a package manager
You'll need: Node.js · npm or Yarn
Install with Yarn
yarn add react-helmetInstall with npm
npm install --save react-helmet - 2
Run it
- Install the package with yarn or npm
- Import Helmet from "react-helmet"
- Place a <Helmet> component with a <title> and <meta> tags inside your component's render output
- Load the page in a browser and check the document head
- 3
Get the most out of it
- Use titleTemplate and defaultTitle to share a consistent title format across pages
- Use nested Helmet components so child pages override parent defaults
- Use the onChangeClientState callback to track DOM head changes
- For server rendering, call Helmet.renderStatic() after renderToString and use toString() or toComponent() on the results
Downloads
Strengths
- Uses plain HTML tags as its input and output, which keeps it easy to read
- The README states that Helmet 5 is backward-compatible with earlier releases
- Nested components cleanly override duplicate head tags
Trade-offs
- The README does not state which React versions are supported, and the project's last push was in July 2023
- Server-side use requires calling renderStatic correctly, or the README warns of a memory leak
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-helmet (this) | 17.4k | Library | beginner | 3.3 years ago | React developers who need per-page titles and meta tags |
| helmet | 10.7k | Library | beginner | 5 days ago | Developers building Express web apps who want sensible security headers by default |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.