Dependencies array, to better control the update of meta tags
When a component is unmounted, its meta tags are removed
When possible, existing tags are updated rather then re-created (even if created in different components)
DOM changes are debounced to avoid pointless consecutive updates
When used in sibling or nested components, meta tags are merged: last rendered components (i.e. the inner ones) overrides common meta tags.
Supports static HTML generation for Server Side Rendering
Typescript declarations

Install

  npm install react-metatags-hook

  yarn add react-metatags-hook

Example

import useMetaTag from 'react-metatags-hook'

const Component = ({
  match,
}) => {
  const {
    params: { id },
    url,
  } = match
  useMetaTag({
    title: `Page Title`,
    description: `An interesting page description with id: ${id}`,
    charset: 'utf8',
    lang: 'en',
    metas: [
      { name: 'keywords', content: 'a, list, of, keywords' },
      { name: 'robots', content: 'index, follow' },
      { name: 'DC.Title', content: 'Dublin Core Title' },
      { name: 'url', content: `http://yourwebsite.com${url}` },
      { property: 'fb:app_id', content: '1234567890' },
      { 'http-equiv': 'Cache-Control', content: 'no-cache' },
    ],
    links: [
      { rel: 'canonical', href: 'http://yourwebsite.com' },
      { rel: 'icon', type: 'image/ico', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', sizes: '72x72', type: 'image/png', href: '/apple-72.png' },
    ],
    openGraph: {
      title: 'Page Title',
      image: 'http://yourwebsite.com/ogimage.jpg',
      'site_name': 'My Site'
    },
    twitter: {
      card: 'summary',
      creator: '@you',
      title: 'Page Title',
    }
  }, [id, url])
  return (
    <>
      ...
    </>
  )
}

Usage

useMetaTags(config: MetaTagsConfig, dependencies?: any[])

MetaTagsConfig

interface MetaTagsConfig {
  title?: string
  description?: string
  lang?: string
  charset?: string
  metas?: MetaTag[]
  links?: LinkTag[]
  openGraph?: {
    [key: string]: string,
  }
  twitter?: {
    [key: string]: string,
  }
}

The config object accepts the following options:

`title`

Sets the <title> tag

`description`

Sets the <meta name="description" /> tag (convenient way, same as using metas)

`lang`

Sets <html> tag lang attribute

`description`

Sets the <meta charset="" /> tag (convenient way, same as using metas)

`metas`

interface MetaTag {
  name?: string
  property?: string
  'http-equiv'?: string
  content?: string
  [attributeKey: string]: string
}

An array of object that represents the <meta /> tags

`links`

interface LinkTag {
  rel?: string
  href?: string
  size?: string
  type?: string
  media?: string
  [attributeKey: string]: string
}

An array of object that represents the <link /> tags

`openGraph`

A convenient method to set <meta property="og:*" /> meta tags. Accepts an object where the key is appended in the property attribute after the og: prefix, and the value is the content attribute of the meta.

`twitter`

A convenient method to set <meta property="twitter:*" /> meta tags. Accepts an object where the key is appended in the property attribute after the twitter: prefix, and the value is the content attribute of the meta.

Server Side Rendering

This library exports the function generateStaticHtml that can be used to generate an HTML string of the meta tags created by this hook. Use it after ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup.

import { generateStaticHtml } from 'react-metatags-hook'
...
ReactDOMServer.renderToString(<App />);
const metaHTML = generateStaticHtml()

What happens when used in multiple component or one component is unmounted

Nested and Sibling components

When used in nested components, the meta defined in the children are merged with the ones defined in the parents. If the same meta are defined in both the parent and the children, the children ones take precedence and overwrite parents ones.

The same logic applies if used in sibling components: the last to render is the one that take precedence if same meta are defined.

Component unmount

When a component that uses this hook is unmounted, its meta definition are removed from a global list of meta and the meta definition is recalculated based on the definitions in other components. If some meta is not longer present in this resulting definition, the meta tag is removed from the DOM.

How `<meta />` and `<link />` are identified

To identify which <meta /> and <link /> are unique (used to merge meta definition as just described, as well as to delete or update the DOM), the following logic is applied.

meta

have the same name attribute
have the same property attribute
have the same http-equiv attribute
have the same charset attribute

link:

have the same rel attribute
have the same rel and sizes attribute

If this logic is unsatisfactory, please let me know and I'll be happy to improve it.

Keywords

FAQs

What is react-metatags-hook?

Is react-metatags-hook popular?

Is react-metatags-hook well maintained?

Last updated on 12 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-metatags-hook

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}1.0.1 - 2019-05-12