react-helmet README

The project's README from github.com/nfl/react-helmet. As one markdown file: README.md.

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

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:

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

react-helmet (nfl/react-helmet)

Searching Database…

17.4K ·GitHub
React-helmet
Что это такое?Это переиспользуемый React-компонент, который управляет всеми изменениями head-секции документа — тегами title, meta, link и script, которые находятся за пределами разметки, которую рендерит ваше приложение.
Это компонент, который я добавляю внутрь React-дерева, или отдельный инструмент?Компонент — вы просто вставляете его в любое место React-дерева с обычными HTML-тегами внутри, а Helmet выводит эти теги в head. Он нарочно сделан простым и дружелюбным к новичкам в React.
Как добавить его в свой проект?Установите пакет через npm или Yarn (npm install react-helmet), затем оберните нужные теги для head в этот компонент там, где они требуются.
Нужно ли что-то ещё, кроме React?Только React-приложение — сам пакет подтягивает лишь небольшие вспомогательные библиотеки (prop-types, react-side-effect, react-fast-compare, object-assign), которые npm установит автоматически.
В чём подвох с серверным рендерингом?Helmet отслеживает смонтированные экземпляры, поэтому на сервере нужно обязательно вызвать renderStatic(), иначе будет утечка памяти. Если серверный бандл собран заранее с помощью webpack, убедитесь, что он использует тот же экземпляр Helmet, что и ваше приложение.
Какие теги в head он может управлять?Все валидные head-теги: title, base, meta, link, script, noscript и style. Также поддерживаются атрибуты тегов body, html и title.
Как работает серверный рендеринг?После ReactDOMServer.renderToString или renderToStaticMarkup вызовите Helmet.renderStatic(). Вы получите объект с title, meta, link, script, style, base, noscript и атрибутами body/html, где у каждого есть методы toString() и toComponent() для вставки в вашу предзаготовку.
А если два моих компонента задают один и тот же тег?Вложенные или более поздние компоненты переопределяют дублирующиеся изменения в head. А вот дубликаты, объявленные в одном и том же компоненте, сохраняются — так можно держать несколько ссылок 'apple-touch-icon'.
У меня старая версия Helmet — обновление будет болезненным?Нет. Helmet 5 полностью обратно совместим с предыдущими версиями, так что обновляться можно в любой момент без ломающих изменений; переход на новый, более семантичный API приветствуется, но не обязателен.
What are similar projects?ScrollMagic, nuqs, react-i18next, tui.editor, marked, pug, jsdom, mustache.js
Which topics is it in?ssr, beginner-friendly, browser, html, web-development, react, npm, frontend, nodejs, library, javascript, web
Creator
nfl
Size
2.1 MB
Stars
17.4K
Updated
CommitJun 30Release6.1.0Jun 08
Age
11y
Commits · 90 Days