React Helmet Itemprop
Fork of the excellent react-helmet, just added itemprop, but I needed before possible integration with the original, use the original package because this is not maintained at all
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
;; { return <div className="application"> <Helmet title="My Title" /> ... </div> ;};
;; { return <div className="application"> <Helmet title="My Title" titleTemplate="MySite.com - %s" 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" onChangeClientState= console /> ... </div> ;};
Features
- Supports isomorphic environment.
- Nested components override duplicate head changes.
- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
- Only valid
base
/meta
/link
/script
key names allowed. - Support for callbacks to fire when Helmet changes the DOM.
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.
ReactDOM;let head = Helmet; headtitleheadbaseheadmetaheadlinkheadscript
head
contains five possible properties, title
, base
, meta
, link
, script
:
- Each property contains
toComponent()
andtoString()
methods. Use whichever is appropriate for your environment. 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
{ return <html> <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>
License
MIT