Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-helmet-async

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-helmet-async

Thread-safe Helmet for React 16+ and friends

0.0.3
Source
npm

Version published: 7 years ago

Weekly downloads: 1.8M; decreased by-2.32%

Maintainers: 1

Weekly downloads

Created: 7 years ago

What is react-helmet-async?

The react-helmet-async package is a reusable React component that manages changes to the document head, allowing developers to dynamically set the contents of the head section of the page, which includes the title, meta tags, and other elements. It is a thread-safe version of react-helmet that works well with server-side rendering.

What are react-helmet-async's main functionalities?

Setting the page title

This feature allows you to set the title of the page dynamically. The title tag inside the Helmet component will update the document's title when the component is rendered.

{"<Helmet><title>My Page Title</title></Helmet>"}

Managing meta tags

With this feature, you can manage meta tags such as the description, keywords, and others. This is particularly useful for SEO purposes and for providing metadata for social media platforms.

{"<Helmet><meta name='description' content='Page description' /></Helmet>"}

Adding link tags

This feature allows you to add link elements to the head, which can be used for defining canonical URLs, linking to stylesheets, or adding a favicon.

{"<Helmet><link rel='canonical' href='http://mysite.com/example' /></Helmet>"}

Adding script tags

You can dynamically add script tags to the head of the document, which is useful for including external JavaScript files or inline scripts.

{"<Helmet><script src='http://include.com/pathtojs.js' type='text/javascript' /></Helmet>"}

Other packages similar to react-helmet-async

react-helmet-async

This package is a fork of React Helmet. <Helmet> usage is synonymous, but SSR is radically different.

react-helmet relies on react-side-effect, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to to encapsulate data on a per-request basis, this package does just that.

Usage

The main way that this package differs from react-helmet is that it requires using a Provider to encapsulate Helmet state for your React tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:

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

const app = (
  <Provider>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </Provider>
);

On the server, we will no longer use static methods to extract state. react-side-effect exposed a .rewind() method, which Helmet used when calling Helmet.renderStatic(). Instead, we are going to pass a context prop to HelmetProvider, which will hold our state specific to each request.

import { HelmetProvider } from 'react-helmet-async';

const helmetContext = {};

const app = (
  <Provider context={helmetContext}>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </Provider>
);

const { helmet } = helmetContext;

// helmet.title.toString() etc...

Streams

This package only works with streaming if your <head> data is output outside of renderToNodeStream(). This is possible if your data hydration method already parses your React tree. Example:

import through from 'through';
import { renderToNodeStream } from 'react-dom/server';
import { getDataFromTree } from 'react-apollo';
import Helmet, { HelmetProvider } from 'react-helmet-async';
import template from 'server/template';

const helmetContext = {};

const app = (
  <Provider context={helmetContext}>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </Provider>
);

await getDataFromTree(app);

const [header, footer] = template({
  helmet: helmetContext.helmet,
});

res.status(200);
res.write(header);
renderToNodeStream(app)
  .pipe(
    through(
      function write(data) {
        this.queue(data);
      },
      function end() {
        this.queue(footer);
        this.queue(null);
      }
    )
  )
  .pipe(res);

FAQs

What is react-helmet-async?

Is react-helmet-async popular?

Is react-helmet-async well maintained?

Package last updated on 02 Jan 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install