What is react helmet?
Published in
2 min readDec 11, 2019
A document head manager for React
React Helmet is a simple component that makes it easy to manage and dynamically set what’s in the document’s head section. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media-friendly.
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.
Installation
Yarn:
yarn add react-helmetnpm:
npm install --save react-helmetFeatures
- Supports all valid head tags:
title,base,meta,link,script,noscript, andstyletags. - Supports attributes for
body,htmlandtitletags. - 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
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>GitHub :
Author: National Football League
Happy Coding :)
