My Title

# React Helmet [![npm Version](https://img.shields.io/npm/v/react-helmet.svg?style=flat-square)](https://www.npmjs.org/package/react-helmet) [![codecov.io](https://img.shields.io/codecov/c/github/nfl/react-helmet.svg?branch=master&style=flat-square)](https://codecov.io/github/nfl/react-helmet?branch=master) [![Build Status](https://img.shields.io/travis/nfl/react-helmet/master.svg?style=flat-square)](https://travis-ci.org/nfl/react-helmet) [![Dependency Status](https://img.shields.io/david/nfl/react-helmet.svg?style=flat-square)](https://david-dm.org/nfl/react-helmet) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md#pull-requests) 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.0.0 Breaking Changes](https://github.com/nfl/react-helmet/releases/tag/6.0.0) ## Example ```javascript import React from "react"; import {Helmet} from "react-helmet"; class Application extends React.Component { render () { return (

My Title ...

); } }; ``` Nested or latter components will override duplicate changes: ```javascript My Title Nested Title ``` outputs: ```html Nested Title ``` 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. ```javascript ReactDOMServer.renderToString(); 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 ```javascript const html = ` ${helmet.title.toString()} ${helmet.meta.toString()} ${helmet.link.toString()}

// React stuff here

`; ``` ### As React components ```javascript 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 ```javascript Nested Title outputs: Nested Title | MyAwesomeWebsite.com */} titleTemplate="MySite.com - %s" {/* (optional) used as a fallback when a template exists but a title is not defined outputs: My Site */} defaultTitle="My Default Title" {/* (optional) callback that tracks DOM changes */} onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)} > {/* html attributes */} {/* body attributes */} {/* title attributes and value */} My Plain Title or {`dynamic`} title {/* base element */} {/* multiple meta elements */} {/* multiple link elements */} {locales.map((locale) => { })} {/* multiple script elements */} {/* noscript elements */} {/* inline style elements */} ``` ## Contributing to this project Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md). * [Pull requests](CONTRIBUTING.md#pull-requests) * [Development Process](CONTRIBUTING.md#development) ## License MIT

	Stars	Issues	Version	Updated	Created
react-document-meta	320	13	3.0.0-beta.2	6 years ago	9 years ago
react-helmet	17,332	222	6.1.0	4 years ago	9 years ago
react-helmet-async	2,084	63	2.0.5	4 months ago	7 years ago

react-document-meta vs react-helmet vs react-helmet-async

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past