I came upon a react component called React Helmet that eases the manageability of a document's head section. It is social media friendly in that it combines server-side rendering and React Helmet itself and makes a dynamic duo for creating apps. React Helmet uses HTML tags and is very simple to use.
Installation
With npm:
$ npm install --save react-helmet
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.
Example of Use
Import Helmet at the top:
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};
Nested or latter components will override duplicate changes:
<Parent>
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
<Child>
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</Child>
</Parent>
outputs:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
Read more about React Helmet on Github for the full documentation.
References
Top comments (0)