Package Exports
- react-helmet
- react-helmet/lib/HelmetConstants
- react-helmet/lib/HelmetConstants.js
- react-helmet/package
- react-helmet/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-helmet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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
import React from "react";
import Helmet from "react-helmet";
export default class Application extends React.Component {
render() {
return (
<div className="application">
<Helmet title="My Title" />
...
</div>
);
}
};
import React from "react";
import Helmet from "react-helmet";
export default class Application extends React.Component {
render() {
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={(newState) => console.log(newState)}
/>
...
</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.renderToString(<Handler />);
let head = Helmet.rewind();
head.title
head.base
head.meta
head.link
head.script
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.title.toString()}
${head.meta.toString()}
${head.link.toString()}
</head>
<body>
<div id="content">
// React stuff here
</div>
</body>
</html>
`;
As React components
class HTML extends React.Component {
render() {
return (
<html>
<head>
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
</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>
Contributing to this project
Please take a moment to review the guidelines for contributing.
License
MIT