react-metatags-hook
Advanced tools
Changelog
2.0.0 - 2024-02-04
>=16.8.0.useMetaTags instead. (e.g. import { useMetaTags } from 'react-metatags-hook')useMetaTags() dependencies array is now required.useMetaTags(), while following the same principles as before, has been completely reworked in the implementation: in case of unexpected behaviours, please open an issue.es5 to es6/es2015, so legacy browsers (Internet Explorer) or very old NodeJS version are no longer supported without transpilation.Readme
React hook to manage HTML meta tags.
titledescriptioncharsetlang on the html tag<meta> and <link>og:* and twitter:* meta tags npm install react-metatags-hook
or
yarn add react-metatags-hook
import { useMetaTags } from 'react-metatags-hook';
const Component = ({ match }) => {
const {
params: { id },
url,
} = match;
useMetaTags(
{
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 <>...</>;
};
useMetaTags(config: MetaTagsConfig, dependencies: any[])
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:
titleSets the <title> tag
descriptionSets the <meta name="description" /> tag (convenient way, same as using metas)
langSets <html> tag lang attribute
descriptionSets the <meta charset="" /> tag (convenient way, same as using metas)
metasinterface MetaTag {
'name'?: string;
'property'?: string;
'http-equiv'?: string;
'content'?: string;
[attributeKey: string]: string;
}
An array of object that represents the <meta /> tags
linksinterface LinkTag {
rel?: string;
href?: string;
size?: string;
type?: string;
media?: string;
[attributeKey: string]: string;
}
An array of object that represents the <link /> tags
openGraphA 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.
twitterA 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.
When used in nested components, metas 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, children ones take precedence and overwrite parents ones. (see Tags creation and update for more details)
The same logic applies if used in sibling components: the last to render is the one that take precedence if same meta are defined.
When a component that uses this hook is unmounted, its metas definition are removed from a global list of metas and the metas 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.
As just described, this library allows to overwrite tags in nested components, and updates existing tags if possible rather the creating new one.
To do so, it has to identify when two tag definitions refers to the same tag (i.e. you want to change the <link rel='icon'/> when a component is mounted).
To identify when tags are unique, the following attributes are considered, and every time at least one of them is different, a new tag in the head is created.
Any Tag
id<meta />
namepropertyhttp-equivcharset<link />
relsizesIf this logic is unsatisfactory, please let me know and I'll be happy to improve it.
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();
Is important to point out that the meta tags definitions are stored inside the library instance. This means that when different components are rendered into string in the same application instance (i.e. node server), the meta tags of the second render will add up to the definitions generated by the first render.
If this behavior is not the desired one, you can reset the meta tags definitions stored in the library instance using the resetMetaTags function.
import { generateStaticHtml, resetMetaTags } from 'react-metatags-hook';
ReactDOMServer.renderToString(<App />);
const metaHTML = generateStaticHtml();
resetMetaTags();
ReactDOMServer.renderToString(<AnotherApp />);
const anotherMetaHTML = generateStaticHtml();
FAQs
React Hook to manage html meta tags
The npm package react-metatags-hook receives a total of 1,398 weekly downloads. As such, react-metatags-hook popularity was classified as popular.
We found that react-metatags-hook demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.