React Helmet


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
- As string output
- As React components
- Use Cases
- Contributing to this project
- License
- More Examples

Examples

``javascript
import React from "react";
import Helmet from "react-helmet";

export default function Application () {
return (

...

);
};
`

`javascript
import React from "react";
import Helmet from "react-helmet";

export default function Application () {
return (



);
};
`

Features

- Supports isomorphic/universal environment.
- Nested components override duplicate head changes.
- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
- Supports base, meta, link, script, style tags and html attributes.
- Callback for tracking DOM changes.

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.

`javascript
ReactDOM.renderToString();
let head = Helmet.rewind();

head.htmlAttributes
head.title
head.base
head.meta
head.link
head.script
`

head contains seven possible properties:
- htmlAttributes
- title
- base
- meta
- link
- script
- style

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:

$3


`javascript
const html =



${head.title.toString()}
${head.meta.toString()}
${head.link.toString()}





;
`

$3

`javascript
function HTML () {
const attrs = head.htmlAttributes.toComponent();

return (


{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}

// React stuff here

);
}
`

Use Cases

1. Nested or latter components will override duplicate changes.
`javascript
title="My Title"
meta={[
{"name": "description", "content": "Helmet application"}
]}
/>
title="Nested Title"
meta={[
{"name": "description", "content": "Nested component"}
]}
/>
`
Yields:
`




`

2. Use a titleTemplate to format title text in your page title
`javascript
title="My Title"
titleTemplate="%s | MyAwesomeWebsite.com"
/>
title="Nested Title"
/>
`
Yields:
`



`

3. Duplicate meta and/or link tags in the same component are preserved
`javascript
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:
`




`

4. Duplicate tags can still be overwritten
`javascript
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"}
]}
/>
link={[
{"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"}
]}
/>
`
Yields:
`



`

5. Only one base tag is allowed
`javascript
base={{"href": "http://mysite.com/"}}
/>
base={{"href": "http://mysite.com/blog"}}
/>
`
Yields:
`



`

6. defaultTitle will be used as a fallback when the template does not want to be used in the current Helmet
`javascript
defaultTitle="My Site"
titleTemplate="My Site - %s"
/>
`
Yields:
`



`

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.

`javascript
defaultTitle="My Site"
titleTemplate="My Site - %s"
/>

title="Nested Title"
/>
`
Yields:
`



`

And other child route components without a Helmet will inherit the defaultTitle.

7. Usage with

`

8. Usage with

``

Contributing to this project

Please take a moment to review the guidelines for contributing.

* Pull requests
* Development Process

License

MIT

More Examples

react-helmet-example