This reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.
Inspired by react-document-title
Table of Contents generated with DocToc
- Examples
- Features
- Installation
- Server Usage
- Use Cases
- Contributing to this project
- License
- More Examples
Examples
;; { return <div className="application"> <Helmet title="My Title" /> ... </div> ;};
;; { return <div className="application"> <Helmet htmlAttributes="lang": "en" "amp": undefined // amp takes no value title="My Title" titleTemplate="MySite.com - %s" defaultTitle="My Default Title" base="target": "_blank" "href": "http://mysite.com/" meta= "name": "description" "content": "Helmet application" "property": "og:type" "content": "article" link= "rel": "canonical" "href": "http://mysite.com/example" "rel": "apple-touch-icon" "href": "http://mysite.com/img/apple-touch-icon-57x57.png" "rel": "apple-touch-icon" "sizes": "72x72" "href": "http://mysite.com/img/apple-touch-icon-72x72.png" script= "src": "http://include.com/pathtojs.js" "type": "text/javascript" "type": "application/ld+json" innerHTML: `{ "@context": "http://schema.org" }` onChangeClientState= console /> ... </div> ;};
Features
- Supports isomorphic/universal environment.
- Nested components override duplicate head changes.
- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
- Supports
base
,meta
,link
,script
,style
tags andhtml
attributes. - Callback for tracking DOM changes.
Installation
npm install --save react-helmet
Server Usage
To use on the server, call rewind()
after ReactDOM.renderToString
or ReactDOM.renderToStaticMarkup
to get the head data for use in your prerender.
Because this component keeps track of mounted instances, you have to make sure to call rewind
on server, or you'll get a memory leak.
ReactDOM;let head = Helmet; headhtmlAttributesheadtitleheadbaseheadmetaheadlinkheadscript
head
contains seven possible properties:
htmlAttributes
title
base
meta
link
script
style
Each property contains toComponent()
and toString()
methods. Use whichever is appropriate for your environment. For htmlAttributes, use the JSX spread operator on the object returned by toComponent()
. E.g:
As string output
const html = ` <!doctype html> <html > <head> </head> <body> <div id="content"> // React stuff here </div> </body> </html>`;
As React components
{ const attrs = headhtmlAttributes; return <html ...attrs> <head> headtitle headmeta headlink </head> <body> <div id="content"> // React stuff here </div> </body> </html> ;}
Use Cases
- Nested or latter components will override duplicate changes.
<Helmet title="My Title" meta= "name": "description" "content": "Helmet application" /><Helmet title="Nested Title" meta= "name": "description" "content": "Nested component" />
Yields:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
- Use a titleTemplate to format title text in your page title
<Helmet title="My Title" titleTemplate="%s | MyAwesomeWebsite.com"/><Helmet title="Nested Title"/>
Yields:
<head>
<title>Nested Title | MyAwesomeWebsite.com</title>
</head>
- Duplicate
meta
and/orlink
tags in the same component are preserved
<Helmet link= "rel": "apple-touch-icon" "href": "http://mysite.com/img/apple-touch-icon-57x57.png" "rel": "apple-touch-icon" "sizes": "72x72" "href": "http://mysite.com/img/apple-touch-icon-72x72.png" />
Yields:
<head>
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png">
</head>
- Duplicate tags can still be overwritten
<Helmet link= "rel": "apple-touch-icon" "href": "http://mysite.com/img/apple-touch-icon-57x57.png" "rel": "apple-touch-icon" "sizes": "72x72" "href": "http://mysite.com/img/apple-touch-icon-72x72.png" /><Helmet link= "rel": "apple-touch-icon" "href": "http://mysite.com/img/apple-touch-icon-180x180.png" />
Yields:
<head>
<link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png">
</head>
- Only one base tag is allowed
<Helmet base="href": "http://mysite.com/"/><Helmet base="href": "http://mysite.com/blog"/>
Yields:
<head>
<base href="http://mysite.com/blog">
</head>
- defaultTitle will be used as a fallback when the template does not want to be used in the current Helmet
<Helmet defaultTitle="My Site" titleTemplate="My Site - %s"/>
Yields:
<head>
<title>My Site</title>
</head>
But a child route with a title will use the titleTemplate, giving users a way to declare a titleTemplate for their app, but not have it apply to the root.
<Helmet defaultTitle="My Site" titleTemplate="My Site - %s"/> <Helmet title="Nested Title"/>
Yields:
<head>
<title>My Site - Nested Title</title>
</head>
And other child route components without a Helmet will inherit the defaultTitle.
- Usage with
<script>
tags:
<Helmet script= "type": "application/ld+json" "innerHTML": `{ "@context": "http://schema.org", "@type": "NewsArticle" }` />
Yields:
<head>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle"
}
</script>
</head>
- Usage with
<style>
tags:
<Helmet style= "cssText": ` body { background-color: green; } ` />
Yields:
<head>
<style>
body {
background-color: green;
}
</style>
</head>
Contributing to this project
Please take a moment to review the guidelines for contributing.
License
MIT