|
| 1 | +<img src="http://static.nfl.com/static/content/public/static/img/logos/nfl-engineering-light.svg" width="300" /> |
| 2 | +# React Helmet |
| 3 | +This reusable React component will manage all of your changes to the document head with support for document title, meta & link tags. |
| 4 | + |
| 5 | +Inspired by [react-document-title](https://github.com/gaearon/react-document-title) |
| 6 | + |
| 7 | +<!-- START doctoc generated TOC please keep comment here to allow auto update --> |
| 8 | +<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> |
| 9 | +**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* |
| 10 | + |
| 11 | +- [Examples](#examples) |
| 12 | +- [Features](#features) |
| 13 | +- [System Requirements](#system-requirements) |
| 14 | +- [Installation](#installation) |
| 15 | +- [Server Usage](#server-usage) |
| 16 | +- [Use Cases](#use-cases) |
| 17 | +- [Contributing to this project](#contributing-to-this-project) |
| 18 | +- [License](#license) |
| 19 | + |
| 20 | +<!-- END doctoc generated TOC please keep comment here to allow auto update --> |
| 21 | + |
| 22 | +## Examples |
| 23 | +```javascript |
| 24 | +import React from "react"; |
| 25 | +import Helmet from "react-helmet"; |
| 26 | + |
| 27 | +export default class Application extends React.Component { |
| 28 | + render() { |
| 29 | + return ( |
| 30 | + <div className="application"> |
| 31 | + <Helmet title="My Title" /> |
| 32 | + ... |
| 33 | + </div> |
| 34 | + ); |
| 35 | + } |
| 36 | +}; |
| 37 | +``` |
| 38 | + |
| 39 | +```javascript |
| 40 | +import React from "react"; |
| 41 | +import Helmet from "react-helmet"; |
| 42 | + |
| 43 | +export default class Application extends React.Component { |
| 44 | + render() { |
| 45 | + return ( |
| 46 | + <div className="application"> |
| 47 | + <Helmet |
| 48 | + title="My Title" |
| 49 | + meta={[ |
| 50 | + {"name": "description", "content": "Helmet application"}, |
| 51 | + {"property": "og:type", "content": "article"} |
| 52 | + ]} |
| 53 | + link={[ |
| 54 | + {"rel": "canonical", "href": "http://mysite.com/example"}, |
| 55 | + {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"}, |
| 56 | + {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"} |
| 57 | + ]} |
| 58 | + /> |
| 59 | + ... |
| 60 | + </div> |
| 61 | + ); |
| 62 | + } |
| 63 | +}; |
| 64 | +``` |
| 65 | + |
| 66 | +## Features |
| 67 | +- Supports isomorphic environment. |
| 68 | +- Nested components override duplicate head changes. |
| 69 | +- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon"). |
| 70 | +- Only valid `meta`/`link` key names allowed. |
| 71 | + |
| 72 | +## System Requirements |
| 73 | +- `npm >=2.7.0` |
| 74 | + |
| 75 | +## Installation |
| 76 | +``` |
| 77 | +npm install --save react-helmet |
| 78 | +``` |
| 79 | + |
| 80 | +## Server Usage |
| 81 | +To use on the server, call `rewind()` after `React.renderToString` to get all the head changes to use in your prerender. |
| 82 | +```javascript |
| 83 | +React.renderToString(<Handler />); |
| 84 | +let head = Helmet.constructor.rewind(); |
| 85 | + |
| 86 | +head.title |
| 87 | +head.meta |
| 88 | +head.link |
| 89 | +``` |
| 90 | + |
| 91 | +**Note:** Because this component tracks mounted instances you will need to call rewind on the server to avoid a memory leak. |
| 92 | + |
| 93 | +## Use Cases |
| 94 | +1. Nested or latter components will override duplicate changes. |
| 95 | + ```javascript |
| 96 | + <Helmet |
| 97 | + title="My Title" |
| 98 | + meta={[ |
| 99 | + {"name": "description", "content": "Helmet application"} |
| 100 | + ]} |
| 101 | + /> |
| 102 | + <Helmet |
| 103 | + title="Nested Title" |
| 104 | + meta={[ |
| 105 | + {"name": "description", "content": "Nested component"} |
| 106 | + ]} |
| 107 | + /> |
| 108 | + ``` |
| 109 | + Yields: |
| 110 | + ``` |
| 111 | + <head> |
| 112 | + <title>Nested Title</title> |
| 113 | + <meta name="description" content="Nested component" /> |
| 114 | + </head> |
| 115 | + ``` |
| 116 | + |
| 117 | +2. Duplicate `meta` and/or `link` tags in the same component are preserved |
| 118 | + ```javascript |
| 119 | + <Helmet |
| 120 | + link={[ |
| 121 | + {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"}, |
| 122 | + {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"} |
| 123 | + ]} |
| 124 | + /> |
| 125 | + ``` |
| 126 | + Yields: |
| 127 | + ``` |
| 128 | + <head> |
| 129 | + <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" /> |
| 130 | + <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" /> |
| 131 | + </head> |
| 132 | + ``` |
| 133 | + |
| 134 | +3. Duplicate tags can still be overwritten |
| 135 | + ```javascript |
| 136 | + <Helmet |
| 137 | + link={[ |
| 138 | + {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"}, |
| 139 | + {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"} |
| 140 | + ]} |
| 141 | + /> |
| 142 | + <Helmet |
| 143 | + link={[ |
| 144 | + {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"} |
| 145 | + ]} |
| 146 | + /> |
| 147 | + ``` |
| 148 | + Yields: |
| 149 | + ``` |
| 150 | + <head> |
| 151 | + <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png" /> |
| 152 | + </head> |
| 153 | + ``` |
| 154 | + |
| 155 | +## Contributing to this project |
| 156 | +Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md). |
| 157 | + |
| 158 | +* [Pull requests](CONTRIBUTING.md#pull-requests) |
| 159 | +* [Development Process](CONTRIBUTING.md#development) |
| 160 | + |
| 161 | +## License |
| 162 | + |
| 163 | +MIT |
0 commit comments