# React Helmet [![npm package](https://img.shields.io/npm/v/react-helmet.svg?style=flat-square)](https://www.npmjs.org/package/react-helmet) [![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) This reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags. Inspired by [react-document-title](https://github.com/gaearon/react-document-title) **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [Examples](#examples) - [Features](#features) - [Installation](#installation) - [Server Usage](#server-usage) - [As string output](#as-string-output) - [As React components](#as-react-components) - [Use Cases](#use-cases) - [Contributing to this project](#contributing-to-this-project) - [License](#license) - [More Examples](#more-examples) ## Examples ```javascript import React from "react"; import Helmet from "react-helmet"; export default function Application () { return (
...
); }; ``` ```javascript import React from "react"; import Helmet from "react-helmet"; export default function Application () { return (
console.log(newState)} /> ...
); }; ``` ## Features - Supports isomorphic/universal environment. - Nested components override duplicate head changes. - Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon"). - Supports `base`, `meta`, `link`, `script`, `style` tags and `html` attributes. - Callback for tracking DOM changes. ## Installation ``` npm install --save react-helmet ``` ## Server Usage To use on the server, call `rewind()` after `ReactDOM.renderToString` or `ReactDOM.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 `rewind` on server**, or you'll get a memory leak. ```javascript ReactDOM.renderToString(); let head = Helmet.rewind(); head.htmlAttributes head.title head.base head.meta head.link head.script ``` `head` contains seven possible properties: - `htmlAttributes` - `title` - `base` - `meta` - `link` - `script` - `style` Each property contains `toComponent()` and `toString()` methods. Use whichever is appropriate for your environment. For htmlAttributes, use the JSX spread operator on the object returned by `toComponent()`. E.g: ### As string output ```javascript const html = ` ${head.title.toString()} ${head.meta.toString()} ${head.link.toString()}
// React stuff here
`; ``` ### As React components ```javascript function HTML () { const attrs = head.htmlAttributes.toComponent(); return ( {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()}
// React stuff here
); } ``` ## Use Cases 1. Nested or latter components will override duplicate changes. ```javascript ``` Yields: ``` Nested Title ``` 2. Use a titleTemplate to format title text in your page title ```javascript ``` Yields: ``` Nested Title | MyAwesomeWebsite.com ``` 3. Duplicate `meta` and/or `link` tags in the same component are preserved ```javascript ``` Yields: ``` ``` 4. Duplicate tags can still be overwritten ```javascript ``` Yields: ``` ``` 5. Only one base tag is allowed ```javascript ``` Yields: ``` ``` 6. defaultTitle will be used as a fallback when the template does not want to be used in the current Helmet ```javascript ``` Yields: ``` My Site ``` But a child route with a title will use the titleTemplate, giving users a way to declare a titleTemplate for their app, but not have it apply to the root. ```javascript ``` Yields: ``` My Site - Nested Title ``` And other child route components without a Helmet will inherit the defaultTitle. 7. Usage with ` ``` 8. Usage with ` ``` ## 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 ## More Examples [react-helmet-example](https://github.com/mattdennewitz/react-helmet-example)