PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

5.2.0

npm

78-helmet

A document head manager for React

78-helmetbasedocumentheadlinkmetanflnoscriptreactscriptstyletitle
Published16 Oct 2019
Direct dependencies49
Transitive dependenciesNot calculated

README

Current package documentation

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.

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

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 50

Native requirements
49 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
object-assign
Environment
{
  "local_name": "object-assign",
  "alias": false,
  "peer_metadata": null
}
^4.1.1runtime
prop-types
Environment
{
  "local_name": "prop-types",
  "alias": false,
  "peer_metadata": null
}
^15.5.4runtime
react-fast-compare
Environment
{
  "local_name": "react-fast-compare",
  "alias": false,
  "peer_metadata": null
}
^2.0.2runtime
react-side-effect
Environment
{
  "local_name": "react-side-effect",
  "alias": false,
  "peer_metadata": null
}
^1.1.0runtime
babel-core
Environment
{
  "local_name": "babel-core",
  "alias": false,
  "peer_metadata": null
}
^6.24.0development
babel-eslint
Environment
{
  "local_name": "babel-eslint",
  "alias": false,
  "peer_metadata": null
}
^7.1.1development
babel-plugin-external-helpers
Environment
{
  "local_name": "babel-plugin-external-helpers",
  "alias": false,
  "peer_metadata": null
}
^6.22.0development
babel-plugin-istanbul
Environment
{
  "local_name": "babel-plugin-istanbul",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
babel-plugin-transform-class-properties
Environment
{
  "local_name": "babel-plugin-transform-class-properties",
  "alias": false,
  "peer_metadata": null
}
^6.23.0development
babel-plugin-transform-object-rest-spread
Environment
{
  "local_name": "babel-plugin-transform-object-rest-spread",
  "alias": false,
  "peer_metadata": null
}
^6.23.0development
babel-preset-env
Environment
{
  "local_name": "babel-preset-env",
  "alias": false,
  "peer_metadata": null
}
^1.2.2development
babel-preset-react
Environment
{
  "local_name": "babel-preset-react",
  "alias": false,
  "peer_metadata": null
}
^6.23.0development
chai
Environment
{
  "local_name": "chai",
  "alias": false,
  "peer_metadata": null
}
^3.5.0development
codecov
Environment
{
  "local_name": "codecov",
  "alias": false,
  "peer_metadata": null
}
^2.1.0development
conventional-changelog-cli
Environment
{
  "local_name": "conventional-changelog-cli",
  "alias": false,
  "peer_metadata": null
}
^1.3.1development
cz-conventional-changelog
Environment
{
  "local_name": "cz-conventional-changelog",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^3.18.0development
eslint-config-nfl
Environment
{
  "local_name": "eslint-config-nfl",
  "alias": false,
  "peer_metadata": null
}
^11.1.0development
eslint-config-prettier
Environment
{
  "local_name": "eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^2.2.0development
eslint-plugin-import
Environment
{
  "local_name": "eslint-plugin-import",
  "alias": false,
  "peer_metadata": null
}
^2.2.0development
eslint-plugin-jsx-a11y
Environment
{
  "local_name": "eslint-plugin-jsx-a11y",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
eslint-plugin-mocha
Environment
{
  "local_name": "eslint-plugin-mocha",
  "alias": false,
  "peer_metadata": null
}
^4.9.0development
eslint-plugin-prettier
Environment
{
  "local_name": "eslint-plugin-prettier",
  "alias": false,
  "peer_metadata": null
}
^2.1.2development
eslint-plugin-react
Environment
{
  "local_name": "eslint-plugin-react",
  "alias": false,
  "peer_metadata": null
}
^6.10.2development
istanbul
Environment
{
  "local_name": "istanbul",
  "alias": false,
  "peer_metadata": null
}
^0.4.5development
karma
Environment
{
  "local_name": "karma",
  "alias": false,
  "peer_metadata": null
}
^1.5.0development
karma-chai
Environment
{
  "local_name": "karma-chai",
  "alias": false,
  "peer_metadata": null
}
^0.1.0development
karma-chai-sinon
Environment
{
  "local_name": "karma-chai-sinon",
  "alias": false,
  "peer_metadata": null
}
^0.1.5development
karma-chrome-launcher
Environment
{
  "local_name": "karma-chrome-launcher",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development
karma-coverage
Environment
{
  "local_name": "karma-coverage",
  "alias": false,
  "peer_metadata": null
}
^1.1.1development
karma-firefox-launcher
Environment
{
  "local_name": "karma-firefox-launcher",
  "alias": false,
  "peer_metadata": null
}
^1.0.1development
karma-html-reporter
Environment
{
  "local_name": "karma-html-reporter",
  "alias": false,
  "peer_metadata": null
}
^0.2.7development
karma-mocha
Environment
{
  "local_name": "karma-mocha",
  "alias": false,
  "peer_metadata": null
}
^1.3.0development
karma-rollup-preprocessor
Environment
{
  "local_name": "karma-rollup-preprocessor",
  "alias": false,
  "peer_metadata": null
}
^6.1.0development
karma-sourcemap-loader
Environment
{
  "local_name": "karma-sourcemap-loader",
  "alias": false,
  "peer_metadata": null
}
^0.3.7development
karma-spec-reporter
Environment
{
  "local_name": "karma-spec-reporter",
  "alias": false,
  "peer_metadata": null
}
^0.0.30development
karma-tap-reporter
Environment
{
  "local_name": "karma-tap-reporter",
  "alias": false,
  "peer_metadata": null
}
^0.0.6development
mocha
Environment
{
  "local_name": "mocha",
  "alias": false,
  "peer_metadata": null
}
^3.2.0development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^1.4.4development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^15.xdevelopment
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^15.xdevelopment
rimraf
Environment
{
  "local_name": "rimraf",
  "alias": false,
  "peer_metadata": null
}
^2.6.1development
rollup
Environment
{
  "local_name": "rollup",
  "alias": false,
  "peer_metadata": null
}
^0.67.0development
rollup-plugin-babel
Environment
{
  "local_name": "rollup-plugin-babel",
  "alias": false,
  "peer_metadata": null
}
^3.0.7development
rollup-plugin-commonjs
Environment
{
  "local_name": "rollup-plugin-commonjs",
  "alias": false,
  "peer_metadata": null
}
^9.2.0development
rollup-plugin-node-resolve
Environment
{
  "local_name": "rollup-plugin-node-resolve",
  "alias": false,
  "peer_metadata": null
}
^3.4.0development
rollup-plugin-replace
Environment
{
  "local_name": "rollup-plugin-replace",
  "alias": false,
  "peer_metadata": null
}
^2.1.0development
sinon
Environment
{
  "local_name": "sinon",
  "alias": false,
  "peer_metadata": null
}
^2.1.0development
sinon-chai
Environment
{
  "local_name": "sinon-chai",
  "alias": false,
  "peer_metadata": null
}
^2.8.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
>=15.0.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-vta88lPy/Dai6MwBIPXbgsvTJCc99wk/nm/5H0SmLWHdfjKAjbvsRSoN4P1JboZurJR7/yh99PfYBrl54dJdmw==",
  "shasum": "d009cbad6a99feda3ca63a83d6cafbf854b12eb8",
  "tarball": "https://registry.npmjs.org/78-helmet/-/78-helmet-5.2.0.tgz",
  "fileCount": 14,
  "unpackedSize": 280956,
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdptDeCRA9TVsSAnZWagAA48YP/jpDZE7ck7fumLsYprnv\ns4YmykuCDcCuRUZaW7eTD8NQsmqclbX2Cv2+QsojpqXUhSp3qboLDitiWUw4\n7v1WaOoxkL0yy87mPhqNsQYYcOJDeGPZDe0GESqYmFWzuQGYZA6vFH0mlEeb\ntsdyVlBjLxV8feJrsm8aewqiHlLy67oDQJ37eN2oey7bWepUJbcoSb3t0GMM\nK9j9/35sk3XKd72y+sAp/fGNZvPIcurge6H18BVg9qWIyedBk3mLTsSEorB6\n/qHfgosUQRiYkPlDpgzKw9eCRyKzZUFqlHYZ24cPhEocqRfhDsKe3S5MxMjw\naA7eUsv5nV3NpmSn9/U3isXEOfniuxkNEStZHziuQ2Srl/Uwn7acG9XxMrM1\naKa3ytJnFxZjyBi08jxICIgwb+UU6Vu09uydgYohbw5hDCpWuhm03BTOFcFL\nJNiGDt790FVHyiGdtzFvPsPCgP6fADMTywG3zEdFD4TyST6W7j2s9rb15waS\ntR1b9h1It/yjZP2IDhrOb7oHgxFPnW+H7pLI4B2JMqYCXsCk1OW7+Q8OUWQE\nQkcc/CRBS43l12rRM8k5gqEBpPsGBkxaH/GWT1BvXk2c20oaAUax8vG8HcqN\nXsUvE0Qody6o/ctnnejCHhW9pUWauvFHltqkD3qH8ghX4aB3GmCQY0iXpdmW\nUwGi\r\n=15hB\r\n-----END PGP SIGNATURE-----\r\n",
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEQCIHUTGyZlDvmu5FcPgyltHzC0/hUm9hVG0RiAXcjV9ROhAiAZpziw0tHuOOLt6Q2dDNKkqvaCMwHAuwXEJ5rEaWKwCQ=="
    }
  ]
}

Repository

PENDING
mckarty/react-helmet

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 21:05 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:6b94c40d2f8c87860d5d6542feadddb6252cd3e744f40d09d786f0080e3c0fe7

Other collected versions

5.2.223 Oct5.2.116 OctView all collected versions →