Github url

react-helmet

by nfl

A document head manager for React

13.6K Stars 571 Forks Last release: about 1 month ago (6.1.0) MIT License 349 Commits 35 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Helmet

npm Versioncodecov.ioBuild StatusDependency StatusPRs 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 ( 
<helmet>
                <meta charset="utf-8">
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example">
            </helmet> ... 
 ); } };

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:

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

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:

bash yarn add react-helmet

npm:

bash 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></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 = ` ${helmet.title.toString()} ${helmet.meta.toString()} ${helmet.link.toString()} 
 // React stuff here 
 `;

As React components

function HTML () { const htmlAttrs = helmet.htmlAttributes.toComponent(); const bodyAttrs = helmet.bodyAttributes.toComponent(); return ( {helmet.title.toComponent()} {helmet.meta.toComponent()} {helmet.link.toComponent()} 
 // React stuff here 
 ); }

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 set to false disable string encoding encodespecialcharacters="{true}" useful when you want titles inherit from a template: titletemplate="%s | MyAwesomeWebsite.com">
            <title>Nested Title</title>
        </helmet> outputs: <title>Nested Title | MyAwesomeWebsite.com</title> \*/} 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"></helmet> outputs: <title>My Site</title> \*/} 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 \*/}

{/* body attributes */}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.