@awssam/react-meta-plugin v1.0.0

@awssam/react-meta-plugin

@awssam/react-meta-plugin is a lightweight React package for dynamically managing meta tags and page titles in your React applications.

🌟 Features

• Set page titles dynamically.
• Manage <meta> tags for SEO and social media previews.
• Lightweight and easy to integrate with your project.
• Written in TypeScript for type safety.

📦 Installation

Install the package using npm:

npm install @awssam/react-meta-plugin

Or with Yarn:

yarn add @awssam/react-meta-plugin

🚀 Usage

Basic Example

Import the MetaTag component and use it in your application to dynamically set the title and meta description:

import React from "react";
import MetaTag from "@awssam/react-meta-plugin";

const HomePage: React.FC = () => (
  <div>
    <MetaTag title="Home Page" description="Welcome to the Home Page!" />
    <h1>Hello, world!</h1>
  </div>
);

export default HomePage;

Dynamic Usage

You can use MetaTag dynamically to update meta tags based on your application state:

import React, { useState } from "react";
import MetaTag from "@awssam/react-meta-plugin";

const App: React.FC = () => {
  const [title, setTitle] = useState("Default Title");

  return (
    <div>
      <MetaTag title={title} description="Dynamic description here." />
      <h1>{title}</h1>
      <button onClick={() => setTitle("Updated Title")}>Update Title</button>
    </div>
  );
};

export default App;

📜 Props

🛠️ Development

Building the Package

To build the package locally:

1. Clone the repository:

   git clone https://github.com/awssam/react-meta-plugin.git
   cd react-meta-plugin

2. Install dependencies:

   npm install

3. Build the package:

   npm run build

✨ Contributing

Contributions are welcome! If you’d like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Commit your changes (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Open a pull request.