](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}
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
import React from "react";
import Helmet from "react-helmet";
export default function Application () {
return (
<div className="application">
<Helmet title="My Title" />
...
</div>
);
};import React from "react";
import Helmet from "react-helmet";
export default function Application () {
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={(newState) => console.log(newState)}
/>
...
</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/scriptkey names allowed. - Support for callbacks to fire when Helmet changes the DOM.
npm install --save react-helmet
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.htmlAttributes
head.title
head.base
head.meta
head.link
head.scripthead contains six possible properties:
htmlAttributestitlebasemetalinkscript
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:
const html = `
<!doctype html>
<html ${head.htmlAttributes.toString()}>
<head>
${head.title.toString()}
${head.meta.toString()}
${head.link.toString()}
</head>
<body>
<div id="content">
// React stuff here
</div>
</body>
</html>
`;function HTML () {
const attrs = head.htmlAttributes.toComponent();
return (
<html {...attrs}>
<head>
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
</head>
<body>
<div id="content">
// React stuff here
</div>
</body>
</html>
);
}- 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>
- 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.
Please take a moment to review the guidelines for contributing.
MIT