A CSR-only React head manager that prevents duplicate meta tags and safely manages document head elements.
A lightweight, CSR-focused alternative for managing document head elements in React. Perfect for simple client-side rendered applications that need:
- Explicit duplicate prevention - Always removes existing meta tags before adding new ones
- Simplicity - Just a single component with props, no complex setup
- Performance - Uses
useLayoutEffectfor synchronous DOM updates before paint - Type safety - Written in TypeScript with full type definitions
- ✅ No Duplicate Tags - Removes existing meta tags before creating new ones
- ✅ TypeScript Support - Full type safety with TypeScript
- ✅ Lightweight - Zero dependencies except React
- ✅ CSR Optimized - Uses
useLayoutEffectfor synchronous DOM updates - ✅ Open Graph Support - Built-in support for social media meta tags
- ✅ Simple API - Just pass props, no complex configuration
npm install react-head-safe
# or
yarn add react-head-safe
# or
pnpm add react-head-safeimport { ReactHeadSafe } from 'react-head-safe';
function MyPage() {
return (
<>
<ReactHeadSafe
title="My Page Title"
description="This is the page description for SEO."
keywords="react,seo,meta tags"
ogTitle="My Page Title for Social Media"
ogDescription="This is the description for social media."
ogImage="https://example.com/image.jpg"
/>
<div>Your page content...</div>
</>
);
}| Prop | Type | Description |
|---|---|---|
title |
string |
The page title that will be set in the document.title |
description |
string |
The meta description tag content for SEO |
keywords |
string |
The meta keywords tag content for SEO |
ogTitle |
string |
The Open Graph title (og:title) for social media sharing |
ogDescription |
string |
The Open Graph description (og:description) for social media sharing |
ogImage |
string |
The Open Graph image URL (og:image) for social media sharing |
Use react-head-safe if:
- You're building a CSR-only application (Create React App, Vite, etc.)
- You want a simple, lightweight solution with minimal setup
- You need explicit control over duplicate meta tag prevention
- You prefer
useLayoutEffectfor synchronous DOM updates
Use alternatives if:
- You need SSR/SSG support → use
react-helmet-async, Next.js<Head>, or Remix<Meta> - You need advanced features like nested components or deduplication logic
- You're already using a framework with built-in head management
This library is specifically designed for Client-Side Rendering (CSR) applications. If you need Server-Side Rendering (SSR) support, consider using:
react-helmet-asyncfor SSR- Next.js built-in
<Head>component - Remix
<Meta>component
MIT
Contributions are welcome! Please feel free to submit a Pull Request.