React Helmet

npm Version codecov.io Build Status Dependency Status PRs Welcome

This reusable React component will manage all of your changes to the document head.

Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

6.1.0 Major Changes

Example

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Nested or latter components will override duplicate changes:

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>

outputs:

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>

See below for a full reference guide.

Features

  • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
  • Supports attributes for body, html and title tags.
  • Supports server-side rendering.
  • Nested components override duplicate head changes.
  • Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
  • Callback for tracking DOM changes.

Compatibility

Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.

Installation

Yarn:

yarn add react-helmet

npm:

npm install --save react-helmet

Server Usage

To use on the server, call Helmet.renderStatic() after ReactDOMServer.renderToString or ReactDOMServer.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 renderStatic on server, or you'll get a memory leak.

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

This helmet instance contains the following properties:

  • base
  • bodyAttributes
  • htmlAttributes
  • link
  • meta
  • noscript
  • script
  • style
  • title

Each property contains toComponent() and toString() methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by toComponent(). E.g:

As string output

const html = `
    <!doctype html>
    <html ${helmet.htmlAttributes.toString()}>
        <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
            ${helmet.link.toString()}
        </head>
        <body ${helmet.bodyAttributes.toString()}>
            <div id="content">
                // React stuff here
            </div>
        </body>
    </html>
`;

As React components

function HTML () {
    const htmlAttrs = helmet.htmlAttributes.toComponent();
    const bodyAttrs = helmet.bodyAttributes.toComponent();

    return (
        <html {...htmlAttrs}>
            <head>
                {helmet.title.toComponent()}
                {helmet.meta.toComponent()}
                {helmet.link.toComponent()}
            </head>
            <body {...bodyAttrs}>
                <div id="content">
                    // React stuff here
                </div>
            </body>
        </html>
    );
}

Note: Use the same instance

If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the webpack file so that the same instance of react-helmet is used.

externals: ["react-helmet"],

Or to import the react-helmet instance from the app on the server.

Reference Guide

<Helmet
    {/* (optional) set to false to disable string encoding (server-only) */}
    encodeSpecialCharacters={true}

    {/*
        (optional) Useful when you want titles to inherit from a template:

        <Helmet
            titleTemplate="%s | MyAwesomeWebsite.com"
        >
            <title>Nested Title</title>
        </Helmet>

        outputs:

        <head>
            <title>Nested Title | MyAwesomeWebsite.com</title>
        </head>
    */}
    titleTemplate="MySite.com - %s"

    {/*
        (optional) used as a fallback when a template exists but a title is not defined

        <Helmet
            defaultTitle="My Site"
            titleTemplate="My Site - %s"
        />

        outputs:

        <head>
            <title>My Site</title>
        </head>
    */}
    defaultTitle="My Default Title"
    
    {/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.
        Useful if you want to update the title when the tab is out of focus 
    */}
    defer={false}

    {/* (optional) callback that tracks DOM changes */}
    onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
    {/* html attributes */}
    <html lang="en" amp />

    {/* body attributes */}
    <body className="root" />

    {/* title attributes and value */}
    <title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>

    {/* base element */}
    <base target="_blank" href="http://mysite.com/" />

    {/* multiple meta elements */}
    <meta name="description" content="Helmet application" />
    <meta property="og:type" content="article" />

    {/* multiple link elements */}
    <link rel="canonical" href="http://mysite.com/example" />
    <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" />
    {locales.map((locale) => {
        <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/>
    })}

    {/* multiple script elements */}
    <script src="http://include.com/pathtojs.js" type="text/javascript" />

    {/* inline script elements */}
    <script type="application/ld+json">{`
        {
            "@context": "http://schema.org"
        }
    `}</script>

    {/* noscript elements */}
    <noscript>{`
        <link rel="stylesheet" type="text/css" href="foo.css" />
    `}</noscript>

    {/* inline style elements */}
    <style type="text/css">{`
        body {
            background-color: blue;
        }

        p {
            font-size: 12px;
        }
    `}</style>
</Helmet>

Contributing to this project

Please take a moment to review the guidelines for contributing.

License

MIT

nfl/react-helmet

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 37627792,
"defaultBranch": "master",
"name": "react-helmet",
"ownerLogin": "nfl",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2015-06-18T00:07:34.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/1261928?v=4",
"public": true,
"private": false,
"isOrgOwned": true
},
"currentUser": null,
"refInfo": {
"name": "master",
"listCacheKey": "v0:1689710257.0",
"canEdit": false,
"refType": "branch",
"currentOid": "1b57ddb1524bab195df3eeabafef67768a6d2a15"
},
"tree": {
"items": [
{
"name": "src",
"path": "src",
"contentType": "directory"
},
{
"name": "test",
"path": "test",
"contentType": "directory"
},
{
"name": ".babelrc",
"path": ".babelrc",
"contentType": "file"
},
{
"name": ".editorconfig",
"path": ".editorconfig",
"contentType": "file"
},
{
"name": ".eslintrc",
"path": ".eslintrc",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": ".npmignore",
"path": ".npmignore",
"contentType": "file"
},
{
"name": ".nvmrc",
"path": ".nvmrc",
"contentType": "file"
},
{
"name": ".travis.yml",
"path": ".travis.yml",
"contentType": "file"
},
{
"name": "CHANGELOG.md",
"path": "CHANGELOG.md",
"contentType": "file"
},
{
"name": "CODE_OF_CONDUCT.md",
"path": "CODE_OF_CONDUCT.md",
"contentType": "file"
},
{
"name": "CONTRIBUTING.md",
"path": "CONTRIBUTING.md",
"contentType": "file"
},
{
"name": "ISSUE_TEMPLATE.md",
"path": "ISSUE_TEMPLATE.md",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "karma.config.js",
"path": "karma.config.js",
"contentType": "file"
},
{
"name": "package-lock.json",
"path": "package-lock.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
},
{
"name": "rollup.config.js",
"path": "rollup.config.js",
"contentType": "file"
},
{
"name": "yarn.lock",
"path": "yarn.lock",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 20,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/nfl/react-helmet/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/nfl/react-helmet.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone nfl/react-helmet",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/nfl/react-helmet/archive/refs/heads/master.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=37627792"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "349",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "react-helmet",
"refName": "master",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/8624596438eac766087e192d3bfe71eddbd38ec0c2667c9b414064486caa62d2/687474703a2f2f7374617469632e6e666c2e636f6d2f7374617469632f636f6e74656e742f7075626c69632f7374617469632f696d672f6c6f676f732f72656163742d68656c6d65742e6a7067\"><img align=\"right\" width=\"200\" src=\"https://camo.githubusercontent.com/8624596438eac766087e192d3bfe71eddbd38ec0c2667c9b414064486caa62d2/687474703a2f2f7374617469632e6e666c2e636f6d2f7374617469632f636f6e74656e742f7075626c69632f7374617469632f696d672f6c6f676f732f72656163742d68656c6d65742e6a7067\" data-canonical-src=\"http://static.nfl.com/static/content/public/static/img/logos/react-helmet.jpg\" style=\"max-width: 100%;\"></a></p>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-react-helmet\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#react-helmet\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>React Helmet</h1>\n<p dir=\"auto\"><a href=\"https://www.npmjs.org/package/react-helmet\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1f0da7adeb9eb514a64ffeb116ebd4cf0aceef72b9440cf7e4b42a15f52b7976/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d68656c6d65742e7376673f7374796c653d666c61742d737175617265\" alt=\"npm Version\" data-canonical-src=\"https://img.shields.io/npm/v/react-helmet.svg?style=flat-square\" style=\"max-width: 100%;\"></a>\n<a href=\"https://codecov.io/github/nfl/react-helmet?branch=master\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/187274f63c04e033eb2e4709152094c6742d843634211324ab420248149297e4/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f6e666c2f72656163742d68656c6d65742e7376673f6272616e63683d6d6173746572267374796c653d666c61742d737175617265\" alt=\"codecov.io\" data-canonical-src=\"https://img.shields.io/codecov/c/github/nfl/react-helmet.svg?branch=master&amp;style=flat-square\" style=\"max-width: 100%;\"></a>\n<a href=\"https://travis-ci.org/nfl/react-helmet\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/816c75ce6dedaecf3a39d46d4cc965f3496d8c0c02bf00c176856373b373d4de/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6e666c2f72656163742d68656c6d65742f6d61737465722e7376673f7374796c653d666c61742d737175617265\" alt=\"Build Status\" data-canonical-src=\"https://img.shields.io/travis/nfl/react-helmet/master.svg?style=flat-square\" style=\"max-width: 100%;\"></a>\n<a href=\"https://david-dm.org/nfl/react-helmet\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a44bbe0e5ee6d8ea786f46372ef9d0e6a72633d16682a5a8b17bf210217c70a1/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f6e666c2f72656163742d68656c6d65742e7376673f7374796c653d666c61742d737175617265\" alt=\"Dependency Status\" data-canonical-src=\"https://img.shields.io/david/nfl/react-helmet.svg?style=flat-square\" style=\"max-width: 100%;\"></a>\n<a href=\"/nfl/react-helmet/blob/master/CONTRIBUTING.md#pull-requests\"><img src=\"https://camo.githubusercontent.com/a5ceaa9e114c16d2c7cfd7ef62032b26b6eb47b61b1263ae4ebc5497fedd45b2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265\" alt=\"PRs Welcome\" data-canonical-src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\">This reusable React component will manage all of your changes to the document head.</p>\n<p dir=\"auto\">Helmet <em>takes</em> plain HTML tags and <em>outputs</em> plain HTML tags. It's dead simple, and React beginner friendly.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-610-major-changes\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#610-major-changes\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><a href=\"https://github.com/nfl/react-helmet/releases/tag/6.1.0\">6.1.0 Major Changes</a></h2>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-example\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#example\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Example</h2>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import React from &quot;react&quot;;\nimport {Helmet} from &quot;react-helmet&quot;;\n\nclass Application extends React.Component {\n render () {\n return (\n &lt;div className=&quot;application&quot;&gt;\n &lt;Helmet&gt;\n &lt;meta charSet=&quot;utf-8&quot; /&gt;\n &lt;title&gt;My Title&lt;/title&gt;\n &lt;link rel=&quot;canonical&quot; href=&quot;http://mysite.com/example&quot; /&gt;\n &lt;/Helmet&gt;\n ...\n &lt;/div&gt;\n );\n }\n};\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">React</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">\"react\"</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span><span class=\"pl-v\">Helmet</span><span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">\"react-helmet\"</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">class</span> <span class=\"pl-v\">Application</span> <span class=\"pl-k\">extends</span> <span class=\"pl-v\">React</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">Component</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-en\">render</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">className</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"application\"</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">charSet</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"utf-8\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>My Title<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"canonical\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://mysite.com/example\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n ...\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">div</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">Nested or latter components will override duplicate changes:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;Parent&gt;\n &lt;Helmet&gt;\n &lt;title&gt;My Title&lt;/title&gt;\n &lt;meta name=&quot;description&quot; content=&quot;Helmet application&quot; /&gt;\n &lt;/Helmet&gt;\n\n &lt;Child&gt;\n &lt;Helmet&gt;\n &lt;title&gt;Nested Title&lt;/title&gt;\n &lt;meta name=&quot;description&quot; content=&quot;Nested component&quot; /&gt;\n &lt;/Helmet&gt;\n &lt;/Child&gt;\n&lt;/Parent&gt;\"><pre><span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Parent</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>My Title<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"description\"</span> <span class=\"pl-c1\">content</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Helmet application\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Child</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>Nested Title<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"description\"</span> <span class=\"pl-c1\">content</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Nested component\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Child</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Parent</span><span class=\"pl-c1\">&gt;</span></pre></div>\n<p dir=\"auto\">outputs:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;head&gt;\n &lt;title&gt;Nested Title&lt;/title&gt;\n &lt;meta name=&quot;description&quot; content=&quot;Nested component&quot;&gt;\n&lt;/head&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">head</span><span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">title</span><span class=\"pl-kos\">&gt;</span>Nested Title<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">title</span><span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">name</span>=\"<span class=\"pl-s\">description</span>\" <span class=\"pl-c1\">content</span>=\"<span class=\"pl-s\">Nested component</span>\"<span class=\"pl-kos\">&gt;</span>\n<span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">head</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\">See below for a full reference guide.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-features\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#features\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Features</h2>\n<ul dir=\"auto\">\n<li>Supports all valid head tags: <code>title</code>, <code>base</code>, <code>meta</code>, <code>link</code>, <code>script</code>, <code>noscript</code>, and <code>style</code> tags.</li>\n<li>Supports attributes for <code>body</code>, <code>html</code> and <code>title</code> tags.</li>\n<li>Supports server-side rendering.</li>\n<li>Nested components override duplicate head changes.</li>\n<li>Duplicate head changes are preserved when specified in the same component (support for tags like \"apple-touch-icon\").</li>\n<li>Callback for tracking DOM changes.</li>\n</ul>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-compatibility\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#compatibility\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Compatibility</h2>\n<p dir=\"auto\">Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-installation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#installation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Installation</h2>\n<p dir=\"auto\">Yarn:</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"yarn add react-helmet\"><pre>yarn add react-helmet</pre></div>\n<p dir=\"auto\">npm:</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm install --save react-helmet\"><pre>npm install --save react-helmet</pre></div>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-server-usage\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#server-usage\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Server Usage</h2>\n<p dir=\"auto\">To use on the server, call <code>Helmet.renderStatic()</code> after <code>ReactDOMServer.renderToString</code> or <code>ReactDOMServer.renderToStaticMarkup</code> to get the head data for use in your prerender.</p>\n<p dir=\"auto\">Because this component keeps track of mounted instances, <strong>you have to make sure to call <code>renderStatic</code> on server</strong>, or you'll get a memory leak.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"ReactDOMServer.renderToString(&lt;Handler /&gt;);\nconst helmet = Helmet.renderStatic();\"><pre><span class=\"pl-v\">ReactDOMServer</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">renderToString</span><span class=\"pl-kos\">(</span><span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Handler</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">helmet</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">renderStatic</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">This <code>helmet</code> instance contains the following properties:</p>\n<ul dir=\"auto\">\n<li><code>base</code></li>\n<li><code>bodyAttributes</code></li>\n<li><code>htmlAttributes</code></li>\n<li><code>link</code></li>\n<li><code>meta</code></li>\n<li><code>noscript</code></li>\n<li><code>script</code></li>\n<li><code>style</code></li>\n<li><code>title</code></li>\n</ul>\n<p dir=\"auto\">Each property contains <code>toComponent()</code> and <code>toString()</code> methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by <code>toComponent()</code>. E.g:</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-as-string-output\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#as-string-output\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>As string output</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const html = `\n &lt;!doctype html&gt;\n &lt;html ${helmet.htmlAttributes.toString()}&gt;\n &lt;head&gt;\n ${helmet.title.toString()}\n ${helmet.meta.toString()}\n ${helmet.link.toString()}\n &lt;/head&gt;\n &lt;body ${helmet.bodyAttributes.toString()}&gt;\n &lt;div id=&quot;content&quot;&gt;\n // React stuff here\n &lt;/div&gt;\n &lt;/body&gt;\n &lt;/html&gt;\n`;\"><pre><span class=\"pl-k\">const</span> <span class=\"pl-s1\">html</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s\">`</span>\n<span class=\"pl-s\"> &lt;!doctype html&gt;</span>\n<span class=\"pl-s\"> &lt;html <span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">htmlAttributes</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toString</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span></span>&gt;</span>\n<span class=\"pl-s\"> &lt;head&gt;</span>\n<span class=\"pl-s\"> <span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">title</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toString</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span></span></span>\n<span class=\"pl-s\"> <span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">meta</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toString</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span></span></span>\n<span class=\"pl-s\"> <span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">link</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toString</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span></span></span>\n<span class=\"pl-s\"> &lt;/head&gt;</span>\n<span class=\"pl-s\"> &lt;body <span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">bodyAttributes</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toString</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span></span>&gt;</span>\n<span class=\"pl-s\"> &lt;div id=\"content\"&gt;</span>\n<span class=\"pl-s\"> // React stuff here</span>\n<span class=\"pl-s\"> &lt;/div&gt;</span>\n<span class=\"pl-s\"> &lt;/body&gt;</span>\n<span class=\"pl-s\"> &lt;/html&gt;</span>\n<span class=\"pl-s\">`</span><span class=\"pl-kos\">;</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-as-react-components\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#as-react-components\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>As React components</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"function HTML () {\n const htmlAttrs = helmet.htmlAttributes.toComponent();\n const bodyAttrs = helmet.bodyAttributes.toComponent();\n\n return (\n &lt;html {...htmlAttrs}&gt;\n &lt;head&gt;\n {helmet.title.toComponent()}\n {helmet.meta.toComponent()}\n {helmet.link.toComponent()}\n &lt;/head&gt;\n &lt;body {...bodyAttrs}&gt;\n &lt;div id=&quot;content&quot;&gt;\n // React stuff here\n &lt;/div&gt;\n &lt;/body&gt;\n &lt;/html&gt;\n );\n}\"><pre><span class=\"pl-k\">function</span> <span class=\"pl-c1\">HTML</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">htmlAttrs</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">htmlAttributes</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toComponent</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">bodyAttrs</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">bodyAttributes</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toComponent</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n <span class=\"pl-k\">return</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">html</span> <span class=\"pl-kos\">{</span>...<span class=\"pl-s1\">htmlAttrs</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">head</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">title</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toComponent</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">meta</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toComponent</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-s1\">helmet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">link</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">toComponent</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">head</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">body</span> <span class=\"pl-kos\">{</span>...<span class=\"pl-s1\">bodyAttrs</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">id</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"content\"</span><span class=\"pl-c1\">&gt;</span>\n // React stuff here\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">div</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">body</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">html</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-note-use-the-same-instance\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#note-use-the-same-instance\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Note: Use the same instance</h3>\n<p dir=\"auto\">If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the <code>webpack file</code> so that the same instance of <code>react-helmet</code> is used.</p>\n<div class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"externals: [&quot;react-helmet&quot;],\"><pre class=\"notranslate\"><code>externals: [\"react-helmet\"],\n</code></pre></div>\n<p dir=\"auto\">Or to import the <em>react-helmet</em> instance from the app on the server.</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-reference-guide\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#reference-guide\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Reference Guide</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;Helmet\n {/* (optional) set to false to disable string encoding (server-only) */}\n encodeSpecialCharacters={true}\n\n {/*\n (optional) Useful when you want titles to inherit from a template:\n\n &lt;Helmet\n titleTemplate=&quot;%s | MyAwesomeWebsite.com&quot;\n &gt;\n &lt;title&gt;Nested Title&lt;/title&gt;\n &lt;/Helmet&gt;\n\n outputs:\n\n &lt;head&gt;\n &lt;title&gt;Nested Title | MyAwesomeWebsite.com&lt;/title&gt;\n &lt;/head&gt;\n */}\n titleTemplate=&quot;MySite.com - %s&quot;\n\n {/*\n (optional) used as a fallback when a template exists but a title is not defined\n\n &lt;Helmet\n defaultTitle=&quot;My Site&quot;\n titleTemplate=&quot;My Site - %s&quot;\n /&gt;\n\n outputs:\n\n &lt;head&gt;\n &lt;title&gt;My Site&lt;/title&gt;\n &lt;/head&gt;\n */}\n defaultTitle=&quot;My Default Title&quot;\n \n {/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.\n Useful if you want to update the title when the tab is out of focus \n */}\n defer={false}\n\n {/* (optional) callback that tracks DOM changes */}\n onChangeClientState={(newState, addedTags, removedTags) =&gt; console.log(newState, addedTags, removedTags)}\n&gt;\n {/* html attributes */}\n &lt;html lang=&quot;en&quot; amp /&gt;\n\n {/* body attributes */}\n &lt;body className=&quot;root&quot; /&gt;\n\n {/* title attributes and value */}\n &lt;title itemProp=&quot;name&quot; lang=&quot;en&quot;&gt;My Plain Title or {`dynamic`} title&lt;/title&gt;\n\n {/* base element */}\n &lt;base target=&quot;_blank&quot; href=&quot;http://mysite.com/&quot; /&gt;\n\n {/* multiple meta elements */}\n &lt;meta name=&quot;description&quot; content=&quot;Helmet application&quot; /&gt;\n &lt;meta property=&quot;og:type&quot; content=&quot;article&quot; /&gt;\n\n {/* multiple link elements */}\n &lt;link rel=&quot;canonical&quot; href=&quot;http://mysite.com/example&quot; /&gt;\n &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;http://mysite.com/img/apple-touch-icon-57x57.png&quot; /&gt;\n &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;72x72&quot; href=&quot;http://mysite.com/img/apple-touch-icon-72x72.png&quot; /&gt;\n {locales.map((locale) =&gt; {\n &lt;link rel=&quot;alternate&quot; href=&quot;http://example.com/{locale}&quot; hrefLang={locale} key={locale}/&gt;\n })}\n\n {/* multiple script elements */}\n &lt;script src=&quot;http://include.com/pathtojs.js&quot; type=&quot;text/javascript&quot; /&gt;\n\n {/* inline script elements */}\n &lt;script type=&quot;application/ld+json&quot;&gt;{`\n {\n &quot;@context&quot;: &quot;http://schema.org&quot;\n }\n `}&lt;/script&gt;\n\n {/* noscript elements */}\n &lt;noscript&gt;{`\n &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;foo.css&quot; /&gt;\n `}&lt;/noscript&gt;\n\n {/* inline style elements */}\n &lt;style type=&quot;text/css&quot;&gt;{`\n body {\n background-color: blue;\n }\n\n p {\n font-size: 12px;\n }\n `}&lt;/style&gt;\n&lt;/Helmet&gt;\"><pre><span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Helmet</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* (optional) set to false to disable string encoding (server-only) */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">encodeSpecialCharacters</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">true</span><span class=\"pl-kos\">}</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> (optional) Useful when you want titles to inherit from a template:</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> &lt;Helmet</span>\n<span class=\"pl-c\"> titleTemplate=\"%s | MyAwesomeWebsite.com\"</span>\n<span class=\"pl-c\"> &gt;</span>\n<span class=\"pl-c\"> &lt;title&gt;Nested Title&lt;/title&gt;</span>\n<span class=\"pl-c\"> &lt;/Helmet&gt;</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> outputs:</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> &lt;head&gt;</span>\n<span class=\"pl-c\"> &lt;title&gt;Nested Title | MyAwesomeWebsite.com&lt;/title&gt;</span>\n<span class=\"pl-c\"> &lt;/head&gt;</span>\n<span class=\"pl-c\"> */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">titleTemplate</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"MySite.com - %s\"</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> (optional) used as a fallback when a template exists but a title is not defined</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> &lt;Helmet</span>\n<span class=\"pl-c\"> defaultTitle=\"My Site\"</span>\n<span class=\"pl-c\"> titleTemplate=\"My Site - %s\"</span>\n<span class=\"pl-c\"> /&gt;</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> outputs:</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> &lt;head&gt;</span>\n<span class=\"pl-c\"> &lt;title&gt;My Site&lt;/title&gt;</span>\n<span class=\"pl-c\"> &lt;/head&gt;</span>\n<span class=\"pl-c\"> */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">defaultTitle</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"My Default Title\"</span>\n \n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.</span>\n<span class=\"pl-c\"> Useful if you want to update the title when the tab is out of focus </span>\n<span class=\"pl-c\"> */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">defer</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">false</span><span class=\"pl-kos\">}</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* (optional) callback that tracks DOM changes */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">onChangeClientState</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">newState</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">addedTags</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">removedTags</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-smi\">console</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">log</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">newState</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">addedTags</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">removedTags</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span>\n<span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* html attributes */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">html</span> <span class=\"pl-c1\">lang</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"en\"</span> <span class=\"pl-c1\">amp</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* body attributes */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">body</span> <span class=\"pl-c1\">className</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"root\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* title attributes and value */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">title</span> <span class=\"pl-c1\">itemProp</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"name\"</span> <span class=\"pl-c1\">lang</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"en\"</span><span class=\"pl-c1\">&gt;</span>My Plain Title or <span class=\"pl-kos\">{</span><span class=\"pl-s\">`dynamic`</span><span class=\"pl-kos\">}</span> title<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">title</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* base element */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">base</span> <span class=\"pl-c1\">target</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"_blank\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://mysite.com/\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* multiple meta elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"description\"</span> <span class=\"pl-c1\">content</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Helmet application\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">meta</span> <span class=\"pl-c1\">property</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"og:type\"</span> <span class=\"pl-c1\">content</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"article\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* multiple link elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"canonical\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://mysite.com/example\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"apple-touch-icon\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://mysite.com/img/apple-touch-icon-57x57.png\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"apple-touch-icon\"</span> <span class=\"pl-c1\">sizes</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"72x72\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://mysite.com/img/apple-touch-icon-72x72.png\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">{</span><span class=\"pl-s1\">locales</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">map</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">locale</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"alternate\"</span> <span class=\"pl-c1\">href</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://example.com/{locale}\"</span> <span class=\"pl-c1\">hrefLang</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">locale</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">key</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">locale</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">}</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* multiple script elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">src</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"http://include.com/pathtojs.js\"</span> <span class=\"pl-c1\">type</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"text/javascript\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* inline script elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">type</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"application/ld+json\"</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">`</span>\n<span class=\"pl-s\"> {</span>\n<span class=\"pl-s\"> \"@context\": \"http://schema.org\"</span>\n<span class=\"pl-s\"> }</span>\n<span class=\"pl-s\"> `</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">script</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* noscript elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">noscript</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">`</span>\n<span class=\"pl-s\"> &lt;link rel=\"stylesheet\" type=\"text/css\" href=\"foo.css\" /&gt;</span>\n<span class=\"pl-s\"> `</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">noscript</span><span class=\"pl-c1\">&gt;</span>\n\n <span class=\"pl-kos\">{</span><span class=\"pl-c\">/* inline style elements */</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">style</span> <span class=\"pl-c1\">type</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"text/css\"</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">`</span>\n<span class=\"pl-s\"> body {</span>\n<span class=\"pl-s\"> background-color: blue;</span>\n<span class=\"pl-s\"> }</span>\n<span class=\"pl-s\"></span>\n<span class=\"pl-s\"> p {</span>\n<span class=\"pl-s\"> font-size: 12px;</span>\n<span class=\"pl-s\"> }</span>\n<span class=\"pl-s\"> `</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">style</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Helmet</span><span class=\"pl-c1\">&gt;</span></pre></div>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-contributing-to-this-project\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#contributing-to-this-project\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Contributing to this project</h2>\n<p dir=\"auto\">Please take a moment to review the <a href=\"/nfl/react-helmet/blob/master/CONTRIBUTING.md\">guidelines for contributing</a>.</p>\n<ul dir=\"auto\">\n<li><a href=\"/nfl/react-helmet/blob/master/CONTRIBUTING.md#pull-requests\">Pull requests</a></li>\n<li><a href=\"/nfl/react-helmet/blob/master/CONTRIBUTING.md#development\">Development Process</a></li>\n</ul>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-license\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#license\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>License</h2>\n<p dir=\"auto\">MIT</p>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/22248448673d72e67bcd401cfb2b643c65d30ef3a348d1e7a5d2d015c6c4caec/687474703a2f2f7374617469632e6e666c2e636f6d2f7374617469632f636f6e74656e742f7075626c69632f7374617469632f696d672f6c6f676f732f454e475f536967696c4c6f636b75705f34435f504f535f5247422e706e67\"><img align=\"left\" height=\"200\" src=\"https://camo.githubusercontent.com/22248448673d72e67bcd401cfb2b643c65d30ef3a348d1e7a5d2d015c6c4caec/687474703a2f2f7374617469632e6e666c2e636f6d2f7374617469632f636f6e74656e742f7075626c69632f7374617469632f696d672f6c6f676f732f454e475f536967696c4c6f636b75705f34435f504f535f5247422e706e67\" data-canonical-src=\"http://static.nfl.com/static/content/public/static/img/logos/ENG_SigilLockup_4C_POS_RGB.png\" style=\"max-width: 100%;\"></a></p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 1,
"text": "React Helmet",
"anchor": "react-helmet",
"htmlText": "React Helmet"
},
{
"level": 2,
"text": "6.1.0 Major Changes",
"anchor": "610-major-changes",
"htmlText": "6.1.0 Major Changes"
},
{
"level": 2,
"text": "Example",
"anchor": "example",
"htmlText": "Example"
},
{
"level": 2,
"text": "Features",
"anchor": "features",
"htmlText": "Features"
},
{
"level": 2,
"text": "Compatibility",
"anchor": "compatibility",
"htmlText": "Compatibility"
},
{
"level": 2,
"text": "Installation",
"anchor": "installation",
"htmlText": "Installation"
},
{
"level": 2,
"text": "Server Usage",
"anchor": "server-usage",
"htmlText": "Server Usage"
},
{
"level": 3,
"text": "As string output",
"anchor": "as-string-output",
"htmlText": "As string output"
},
{
"level": 3,
"text": "As React components",
"anchor": "as-react-components",
"htmlText": "As React components"
},
{
"level": 3,
"text": "Note: Use the same instance",
"anchor": "note-use-the-same-instance",
"htmlText": "Note: Use the same instance"
},
{
"level": 3,
"text": "Reference Guide",
"anchor": "reference-guide",
"htmlText": "Reference Guide"
},
{
"level": 2,
"text": "Contributing to this project",
"anchor": "contributing-to-this-project",
"htmlText": "Contributing to this project"
},
{
"level": 2,
"text": "License",
"anchor": "license",
"htmlText": "License"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fnfl%2Freact-helmet"
}
},
{
"displayName": "CODE_OF_CONDUCT.md",
"repoName": "react-helmet",
"refName": "master",
"path": "CODE_OF_CONDUCT.md",
"preferredFileType": "code_of_conduct",
"tabName": "Code of conduct",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fnfl%2Freact-helmet"
}
},
{
"displayName": "LICENSE",
"repoName": "react-helmet",
"refName": "master",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fnfl%2Freact-helmet"
}
}
],
"overviewFilesProcessingTime": 24.380262
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 11:25:38 GMT",
"etag": "80878dec661dd1402d4b25d5abebf3a1",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 11:25:37 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "D9E6:067D:1AEB9AB:262564A:65DC7531",
"x-xss-protection": "0"
}