react-helmet-hack

    3.0.1 • Public • Published
    # 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 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>
        );
    };

    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.

    ReactDOM.renderToString(<Handler />);
    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:

    As string output

    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>
    `;

    As React components

    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>
        );
    }

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

    1. Usage with <script> tags:
    <Helmet
        script={{
            "type": "application/ld+json",
            "innerHTML": `{
                "@context": "http://schema.org",
                "@type": "NewsArticle"
            }`
        }}
    />

    Yields:

    <head>
        <script type="application/ld+json">
          {
              "@context": "http://schema.org",
              "@type": "NewsArticle"
          }
        </script>
    </head>
    
    1. Usage with <style> tags:
    <Helmet
        style={{
            "cssText": `
                body {
                    background-color: green;
                }
            `
        }}
    />

    Yields:

    <head>
        <style>
            body {
                background-color: green;
            }
        </style>
    </head>
    

    Contributing to this project

    Please take a moment to review the guidelines for contributing.

    License

    MIT

    More Examples

    react-helmet-example

    Install

    npm i react-helmet-hack

    DownloadsWeekly Downloads

    10

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar