@awssam/react-meta-plugin is a lightweight React package for dynamically managing meta tags and page titles in your React applications.
- 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.
Install the package using npm:
npm install @awssam/react-meta-plugin
Or with Yarn:
yarn add @awssam/react-meta-plugin
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;
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;
Prop | Type | Default | Description |
---|---|---|---|
title |
string | "" (empty) |
The title of the page. |
description |
string | "" (empty) |
The meta description of the page (for SEO purposes). |
To build the package locally:
-
Clone the repository:
git clone https://github.com/awssam/react-meta-plugin.git cd react-meta-plugin
-
Install dependencies:
npm install
-
Build the package:
npm run build
Contributions are welcome! If you’d like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
). - Commit your changes (
git commit -m 'Add new feature'
). - Push to the branch (
git push origin feature-branch
). - Open a pull request.