/react-helmet

Specify the page title, meta & link tags per component in a nested fashion

Primary LanguageJavaScriptMIT LicenseMIT

# React Helmet [![npm package](https://img.shields.io/npm/v/react-helmet.svg?style=flat-square)](https://www.npmjs.org/package/react-helmet) [![build status](https://img.shields.io/travis/nfl/react-helmet/master.svg?style=flat-square)](https://travis-ci.org/nfl/react-helmet) [![dependency status](https://img.shields.io/david/nfl/react-helmet.svg?style=flat-square)](https://david-dm.org/nfl/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

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"}
                    ]}
                />
                ...
            </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.

Installation

npm install --save react-helmet

Server Usage

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.script

head contains five possible properties, title, base, meta, link, script:

  • All return an array of React components
  • All support a toString() 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.

Use Cases

  1. 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>
  1. 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>
  1. Duplicate meta and/or link 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>
  1. 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>
  1. 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

More Examples

react-helmet-example