Nice Philanthropist Metalhead

    react-helmet-hack-ios

    2.0.0 • 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.

    Because this component keeps track of mounted instances, you have to make sure to call rewind on server, or you'll get a memory leak.

    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-ios

    DownloadsWeekly Downloads

    6

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar