🧠 React Meta Easy

A lightweight and dependency-free React hook & provider for managing page titles, meta tags, and SEO metadata dynamically inside your React apps.
Perfect for single-page applications (SPAs) that don’t rely on SSR.

✨ Features

✅ Dynamically update titles and meta tags
✅ Lightweight — no external dependencies
✅ Simple hook-based API (useMeta)
✅ Works with React 17+ and Vite
✅ Supports Open Graph, Twitter, and custom meta fields

🚀 Installation

Use npm or yarn to install:

npm install react-meta-easy
# or
yarn add react-meta-easy

🧩 Usage

Wrap your app with MetaProvider, then use the useMeta() hook anywhere in your component tree.

import { MetaProvider, useMeta } from "react-meta-easy";

function HomePage() {
  useMeta({
    title: "Home | React Meta Easy",
    description: "A simple React package for dynamic metadata management",
    keywords: "react, meta, seo, helmet alternative",
    "og:title": "React Meta Easy - Open Graph Example",
  });

  return <h1>Welcome to React Meta Easy</h1>;
}

export default function App() {
  return (
    <MetaProvider>
      <HomePage />
    </MetaProvider>
  );
}

🧠 API Reference

MetaProvider

Wraps your application to provide the metadata context.

<MetaProvider>
  <App />
</MetaProvider>

useMeta(metaObject)

Adds or updates metadata dynamically.

| Parameter | Type | Description | |------------|------|-------------| | title | string | Sets the document title | | description | string | Sets the description meta tag | | keywords | string | Sets the keywords meta tag | | Custom keys | string | Adds custom tags like og:title, twitter:card, etc. |

Example:

useMeta({
  title: "About Us",
  description: "Information about our app",
  "og:type": "website",
});

📁 Folder Structure

react-meta-easy/
├─ src/
│  ├─ MetaProvider.jsx
│  └─ index.js
├─ dist/
├─ vite.config.js
├─ package.json
└─ README.md

🛠️ Build Instructions

This library uses Vite in library mode for efficient bundling.

npm run build

Build output:

dist/
├─ react-meta-easy.es.js
├─ react-meta-easy.umd.cjs
└─ react-meta-easy.d.ts

📦 Publishing to npm

Log in to npm:

npm login

Publish your package:

npm publish --access public

If the package name is taken, use a scoped package:

npm publish --access public --scope=@yourusername

🧰 Requirements

• Node.js 16+
• React 17+
• npm 7+

Peer dependencies (from package.json):

"peerDependencies": {
  "react": ">=17",
  "react-dom": ">=17"
}

🧩 Example HTML Output

Calling useMeta({...}) will produce:

<title>Home | React Meta Easy</title>
<meta name="description" content="A simple React package for dynamic metadata management">
<meta name="keywords" content="react, meta, seo, helmet alternative">
<meta property="og:title" content="React Meta Easy - Open Graph Example">

🧑‍💻 Contributing

1. Fork this repository
2. Create a new branch: git checkout -b feature/my-feature
3. Commit: git commit -m "Add my feature"
4. Push: git push origin feature/my-feature
5. Open a pull request 🚀

📜 License

Licensed under the MIT License © 2025 [Your Name]
See LICENSE for details.

❤️ Support

If you enjoy this library:

• 🌟 Star it on GitHub
• 🧵 Share it with React devs
• 💬 Report bugs or suggest new features in the Issues tab

Crafted with ❤️ using React + Vite.