@@ -45,72 +30,58 @@ export function Application () {
};
```
-```javascript
-import React from "react";
-import {Helmet} from "react-helmet";
-
-export function Application () {
- return (
-
- console.log(newState)}
- >
-
-
-
- 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 `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.
+- Supports all valid head tags: `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.
- Supports attributes for `body`, `html` and `title` tags.
-- Supports universal environments.
+- Supports server-side rendering.
- Nested components override duplicate head changes.
-- Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
+- 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
```
-Dependencies: React >= 15.0.0
## 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.
@@ -119,7 +90,7 @@ Because this component keeps track of mounted instances, **you have to make sure
```javascript
ReactDOMServer.renderToString();
-let helmet = Helmet.renderStatic();
+const helmet = Helmet.renderStatic();
```
This `helmet` instance contains the following properties:
@@ -134,7 +105,7 @@ This `helmet` instance contains the following properties:
- `title`
- `titleAttributes`
-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:
+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
@@ -142,7 +113,7 @@ const html = `
- ${helmet.title.toString()}
+ ${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
@@ -164,7 +135,7 @@ function HTML () {
return (
- {helmet.title.toComponent()}
+ {helmet.title.toComponent()}
{helmet.meta.toComponent()}
{helmet.link.toComponent()}
@@ -178,170 +149,97 @@ function HTML () {
}
```
-## Use Cases
-1. Nested or latter components will override duplicate changes.
- ```javascript
-
- My Title
-
-
-
- Nested Title
-
-
- ```
- Yields:
- ```html
-
- Nested Title
-
-
- ```
-
-2. Use a titleTemplate to format title text in your page title
- ```javascript
-
- My Title
-
-
- Nested Title
-
- ```
- Yields:
- ```html
-
- Nested Title | MyAwesomeWebsite.com
-
- ```
-
-3. Duplicate `meta` and/or `link` tags in the same component are preserved
- ```javascript
-
-
-
-
- ```
- Yields:
- ```html
-
-
-
-
- ```
-
-4. Duplicate tags can still be overwritten
- ```javascript
-
-
-
-
-
-
-
- ```
- Yields:
- ```html
-
-
-
- ```
-
-5. Only one base tag is allowed
- ```javascript
-
-
-
-
-
-
- ```
- Yields:
- ```html
-
-
-
- ```
-
-6. defaultTitle can be used as a fallback when the template does not want to be used in the current Helmet
- ```javascript
-
- ```
- Yields:
- ```html
-
- 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
-
-
-
- Nested Title
-
- ```
- Yields:
- ```html
-
- My Site - Nested Title
-
- ```
-
- And other child route components without a Helmet will inherit the defaultTitle.
-
-7. Usage with `
-
- ```
- Yields:
- ```html
-
-
-
- ```
-
-8. Usage with `
-
- ```
- Yields:
- ```html
-
-
-
- ```
+### Reference Guide
+
+```javascript
+
+ My 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) => console.log(newState)}
+>
+ {/* html attributes */}
+