Skip to content

a lightweight React package for dynamically managing meta tags and page titles in your React applications

License

Notifications You must be signed in to change notification settings

awssam/react-meta-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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

Prop Type Default Description
title string "" (empty) The title of the page.
description string "" (empty) The meta description of the page (for SEO purposes).

🛠️ 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.

About

a lightweight React package for dynamically managing meta tags and page titles in your React applications

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published