React Helmet


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

Example

``javascript
import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
render () {
return (

...

);
}
};
`

Nested or latter components will override duplicate changes:

`javascript













`

outputs:

`html




`

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:

$3


`javascript
const html =



${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}





;
`

$3

`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

);
}
`

$3

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.

$3

`javascript
{/ (optional) set to false to disable string encoding (server-only) /}
encodeSpecialCharacters={true}

{/*
(optional) Useful when you want titles to inherit from a template:

titleTemplate="%s | MyAwesomeWebsite.com"
>



outputs:




*/}
titleTemplate="MySite.com - %s"

{/*
(optional) used as a fallback when a template exists but a title is not defined

defaultTitle="My Site"
titleTemplate="My Site - %s"
/>

outputs:




*/}
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 /}


{/ 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.

* Pull requests
* Development Process

License

MIT