This reusable React component will manage all of your changes to the document head with support for document title, meta & link tags.
Inspired by react-document-title
Table of Contents generated with DocToc
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="MyAwesomeWebsite.com - %s"
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"}
]}
/>
...
</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
meta/linkkey names allowed.
Installation
npm install --save react-helmet
Server Usage
To use on the server, call rewind() after React.renderToString to get all the head changes to use in your prerender.
React.renderToString(<Handler />);
let head = Helmet.rewind();
head.title
head.meta
head.linkNote: Because this component tracks mounted instances you will need to call rewind on the server to avoid a memory leak.
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
metaand/orlinktags 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>
Contributing to this project
Please take a moment to review the guidelines for contributing.
License
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
](https://www.npmjs.org/package/react-helmet){kind=link}
](https://travis-ci.org/nfl/react-helmet){kind=link}
](https://david-dm.org/nfl/react-helmet){kind=link}