react-meta-add

Lightweight React hook and component for managing document title, meta tags, and SEO tags dynamically.

Installation

npm install react-meta-add

Usage

Hook Example

import React from 'react';
import { useMeta } from 'react-meta-add';

export default function HomePage() {
  useMeta({
    title: 'Home Page',
    description: 'Welcome to our website',
    keywords: ['react', 'seo', 'meta'],
    canonical: 'https://example.com',
    og: {
      title: 'Home Page',
      image: 'https://example.com/image.jpg',
    },
    twitter: {
      card: 'summary_large_image',
    },
  });

  return <h1>Home Page</h1>;
}

Component Example

import React from 'react';
import { Meta } from 'react-meta-add';

export default function AboutPage() {
  return (
    <>
      <Meta
        title="About Us"
        description="Learn more about us"
        canonical="https://example.com/about"
      />
      <h1>About Us</h1>
    </>
  );
}

Title Template Example

import React from 'react';
import { MetaProvider } from 'react-meta-add';

export default function App({ children }) {
  return (
    <MetaProvider titleTemplate="%s | My Brand">
      {children}
    </MetaProvider>
  );
}

API

Meta Tags

• title: Sets document title
• description: Sets meta description
• keywords: Sets meta keywords (string or array)
• canonical: Sets canonical link URL
• favicon: Sets favicon URL
• author: Sets author meta tag
• robots: Sets robots meta tag (e.g. noindex, nofollow)
• og: Object for Open Graph tags (og:title, og:image, etc.)
• twitter: Object for Twitter card tags (twitter:card, etc.)
• Custom keys are also supported (e.g. themeColor, viewport)

License

MIT