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
- Features
- Installation
- Server Usage
- Use Cases
- Contributing to this project
- License
- More 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"}
]}
/>
...
</div>
);
}
};
- 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
key names allowed.
npm install --save react-helmet
To use on the server, call rewind()
after React.renderToString
or React.renderToStaticMarkup
to get the head data for use in your prerender.
React.renderToString(<Handler />);
let head = Helmet.rewind();
head.title
head.base
head.meta
head.link
head
contains four properties, title
, base
, meta
, and link
:
title
returns a string.meta
andlink
return an array of React components.base
returns a single React component. All support atoString()
method if you need a stringified value of any property.
Note: Because this component tracks mounted instances you will need to call rewind on the server to avoid a memory leak.
- 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>
Please take a moment to review the guidelines for contributing.
MIT