An image showing Mike

React Helmet Async

React Helmet Async

What is React Helmet Async?

This package is a fork of React Helmet. <Helmet> usage is synonymous, but server and client now requires <HelmetProvider> to encapsulate state per request.

Documentation

  • NPM Package here
  • Helmet YouTube Tutorial here

Installation

1npm i react-helmet-async

Setup and Usage

  • Import Helmet and HelmetProvider 

    1import { Helmet, HelmetProvider } from 'react-helmet-async';

  • We need to wrap our app in a HelmetProvider Tag like our example below

    1  <HelmetProvider>
2  <App>
3    <Helmet>
4      <title>Hello World</title>
5      <link rel="canonical" href="https://www.tacobell.com/" />
6    </Helmet>
7    <h1>Hello World</h1>
8  </App>
9</HelmetProvider>
10

  • Next we need to add our Helmet for the APP and Individual Pages or Components we want seperate META tag information

  • A child with the Helmet tag will override the Meta Tags of a parent with the same type

  • We can also insert Dynamic Data into our Meta Tags to have singlePage unique SEO content.

Learn more about it here.