React Helmet Pro is an advanced, modular, and SSR compatible head manager for React applications. It provides a clean and powerful API for dynamically managing <title>, <meta>, <link>, <script>, structured data, favicons, analytics, and security headers designed for real world production use.
Robust head management for SEO, analytics, and SSR made simple.
- Dynamic
<title>,<meta>,<link>,<script>injection - JSON-LD Structured Data support
- Google Analytics integration
- Favicons & SEO helpers
- Security meta tags (CSP, nosniff, etc.)
- SSR-friendly with
collectHelmetTags() - Middleware support for reusable helmet logic
- Context API for global helmet state
- TypeScript support out of the box
# or with npm
npm install react-helmet-pro
# with pnpm
pnpm add react-helmet-pro
# or with yarn
yarn add react-helmet-pro
import { HelmetProvider } from 'react-helmet-pro';
function App() {
return (
<HelmetProvider>
<MainRouter />
</HelmetProvider>
);
}import { Helmet } from 'react-helmet-pro';
<Helmet
title="About Us"
meta={[
{ name: 'description', content: 'Learn about our company' },
{ name: 'keywords', content: 'company, team, about' },
]}
/>import { StructuredData } from 'react-helmet-pro';
<StructuredData
json={{
'@context': 'https://schema.org',
'@type': 'Organization',
name: 'React Helmet Pro Inc.',
url: 'https://reacthelmetpro.dev',
}}
/>import { Analytics } from 'react-helmet-pro';
<Analytics type="gtag" id="G-XXXXXXXXXX" />You can define reusable middleware functions to extend or modify head data.
// middleware/withSiteSuffix.ts
export const withSiteSuffix = (head) => {
if (head.title) {
return { ...head, title: `${head.title} | My Awesome Site` };
}
return head;
};Apply it in your component:
import { useHelmetMiddleware } from 'react-helmet-pro';
import { withSiteSuffix } from './middleware/withSiteSuffix';
useHelmetMiddleware(withSiteSuffix);react-helmet-pro works seamlessly with Next.js, including full support for Server Side Rendering (SSR) and App Router. Follow these steps to integrate it:
Wrap your app in the HelmetProvider:
// app/layout.tsx (App Router)
import './globals.css';
import { HelmetProvider } from 'react-helmet-pro';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<HelmetProvider>{children}</HelmetProvider>
</body>
</html>
);
}💡 Note:
HelmetProvidermust be used inside the<body>tag, not the<head>in App Router.
// app/about/page.tsx or any client component
'use client';
import { Helmet } from 'react-helmet-pro';
export default function AboutPage() {
return (
<>
<Helmet
title="About Us"
meta={[
{ name: 'description', content: 'Learn about our company' },
{ name: 'keywords', content: 'company, team, about' },
]}
/>
<h1>About Us</h1>
</>
);
}If you are using custom SSR setup with getServerSideProps or want finer control, you can extract head tags server-side:
// In custom _document.tsx for SSR
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { collectHelmetTags } from 'react-helmet-pro';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
const helmetTags = collectHelmetTags(/* your Helmet elements */);
return {
...initialProps,
helmetTags,
};
}
render() {
// Inject head tags here if extracted manually
return (
<Html>
<Head>
{/* SSR extracted tags can go here if needed */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;// client/components/HeadWrapper.tsx
'use client';
import { useHelmetMiddleware } from 'react-helmet-pro';
import { withSiteSuffix } from '../middleware/withSiteSuffix';
export default function HeadWrapper() {
useHelmetMiddleware(withSiteSuffix);
return null;
}Use HelmetWrapper at the top of your page/component to apply middleware.
- Hydration Mismatch Warning: Avoid using dynamic data like
Date.now()orMath.random()in head tags without guards (typeof window !== 'undefined') or snapshotting. - Always mark
HelmetandStructuredDatausage inuse clientcomponents.
| Prop | Type | Description |
|---|---|---|
| title | string |
Sets the page title |
| meta | Array<{ name: string; content: string }> |
Injects meta tags |
| Prop | Type | Description |
|---|---|---|
| json | object |
JSON-LD structured data |
| Prop | Type | Description |
|---|---|---|
| href | string |
Path to favicon.ico |
| Prop | Type | Description |
|---|---|---|
| type | 'gtag' |
Currently only supports GTag |
| id | string |
Your Google Analytics ID |
Injects security-related meta tags like CSP, XSS protection, nosniff headers, etc.
import { collectHelmetTags } from 'react-helmet-pro';
const headTags = collectHelmetTags(/* JSX head elements */);
// Use this to inject into SSR-rendered HTMLTest with Jest + React Testing Library.
npm run testExample test:
render(<Helmet title="Test Page" />);
expect(document.title).toBe("Test Page");We welcome all contributions!
To get started:
git clone https://github.com/lahiruudayakumara/react-helmet-pro.git
cd react-helmet-pro
pnpm install
pnpm run devPlease open an issue or pull request if you find bugs or have feature requests.
- Email: lahiruudayakumara.info@gmail.com
- Website: https://lahiruudayakumara.me
MIT License. See LICENSE for details.
Inspired by React Helmet, but rebuilt for modern apps with middleware, SSR, and context extensibility.