2.0.4 • Published 3 months ago

react-helmet-async v2.0.4

Weekly downloads
2,268,476
License
Apache-2.0
Repository
github
Last release
3 months ago

react-helmet-async

CircleCI

Announcement post on Times Open blog

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

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 encapsulate data on a per-request basis, this package does just that.

Usage

New is 1.0.0: No more default export! import { Helmet } from 'react-helmet-async'

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 React from 'react';
import ReactDOM from 'react-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';

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

ReactDOM.hydrate(
  app,
  document.getElementById(‘app’)
);

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 React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet, HelmetProvider } from 'react-helmet-async';

const helmetContext = {};

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

const html = renderToString(app);

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 = (
  <HelmetProvider context={helmetContext}>
    <App>
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
      <h1>Hello World</h1>
    </App>
  </HelmetProvider>
);

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);

Usage in Jest

While testing in using jest, if there is a need to emulate SSR, the following string is required to have the test behave the way they are expected to.

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

HelmetProvider.canUseDOM = false;

Prioritizing tags for SEO

It is understood that in some cases for SEO, certain tags should appear earlier in the HEAD. Using the prioritizeSeoTags flag on any <Helmet> component allows the server render of react-helmet-async to expose a method for prioritizing relevant SEO tags.

In the component:

<Helmet prioritizeSeoTags>
  <title>A fancy webpage</title>
  <link rel="notImportant" href="https://www.chipotle.com" />
  <meta name="whatever" value="notImportant" />
  <link rel="canonical" href="https://www.tacobell.com" />
  <meta property="og:title" content="A very important title"/>
</Helmet>

In your server template:

<html>
  <head>
    ${helmet.title.toString()}
    ${helmet.priority.toString()}
    ${helmet.meta.toString()}
    ${helmet.link.toString()}
    ${helmet.script.toString()}
  </head>
  ...
</html>

Will result in:

<html>
  <head>
    <title>A fancy webpage</title>
    <meta property="og:title" content="A very important title"/>
    <link rel="canonical" href="https://www.tacobell.com" />
    <meta name="whatever" value="notImportant" />
    <link rel="notImportant" href="https://www.chipotle.com" />
  </head>
  ...
</html>

A list of prioritized tags and attributes can be found in constants.js.

Usage without Context

You can optionally use <Helmet> outside a context by manually creating a stateful HelmetData instance, and passing that stateful object to each <Helmet> instance:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet, HelmetProvider, HelmetData } from 'react-helmet-async';

const helmetData = new HelmetData({});

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

const html = renderToString(app);

const { helmet } = helmetData.context;

License

Licensed under the Apache 2.0 License, Copyright © 2018 Scott Taylor

@modern-js/doc-corecarbon-addons-iot-react@docusaurus/core@redwoodjs/webbullseye-stories@uponco/admin-uimikorab-uupm-ui@studiobear/gatsby-theme-ionic@studiobear/gatsby-theme-blogafiniti_video-playerflask_reactfrontity-core-recoded@studiobear/gatsby-theme-blog-ionicalice-reactilottie@phpfox/frameworkliuzy-ant-design-proinlada-meetings-reactjyswsdssdfdfdsafdtedsssswdsws@gulibs/react-prosemirror-editorfrontity-k8s-not-meant-to-be-usefulcra-template-gtja-czcra-template-ltbycecra-template-cz-testmarketing-sitecra-template-josephscandinavia@joseirrazabal/links@joseirrazabal/kittest-widget-order@nosycode/cra-templatesamtools-web-templateant-views@itwin/error-handling-react-3.0dmd-componentsimple-antd-management-fast-framework@cointap/cointap-chartsendpoint-todo-listsinopia_editorracyreact0rm4l_graphicsbinaryblox-react-corecra-template-redux-tailwind-typescriptart47ladys-npm-baselabswap-frontendislands-pressreact-islandcomponents-bullseye@everything-registry/sub-chunk-2558ant-pro-test-larry@paras205/react-ts-starter@ascendware/mxmedusa-admin-ui-facherry-designlikeminds-feed-reactjs-betallt-components-uiminimal-dashboard-react-componentsmy-server-configsmytest-abcnicky-uiniuco-design-systemnnusercentermthc-pc-commonmixmotion-playermisyuanmwapnayannekodocnextpruebaluxury-escapesmerrykitmaraudernpm-platform-test-durulnpm-platform-test-durul1maroc4products-admin-uimedusajs-admin-uimbozkaya-demo-packagemdx-show@trackunit/react-components@times-components/author-profile@times-components/ssr@times-components/storybook@times-components/topic@types/react-helmet-async@theazizmoh/admin-ui@theazizmoh/admin-ui-janata@thinkincoin-libs/app-frontend@umijs/renderer-react@tomic/data-browser@topmonks/react-navi-helmet-async@toptal/picasso-provider@vagabond-inc/react-boilerplate-app@visma-digital-commerce/pwa-klarna@threedddplus/graphic-design-editor@times-components/article-skeleton@vitali_shcherbina/styled-lib@syfxlin/gatsby-theme-coline@t-ui/ffalcon-ui
2.0.4

3 months ago

2.0.4-beta

3 months ago

2.0.4-alpha

3 months ago

2.0.4-next

3 months ago

2.0.0-next

4 months ago

2.0.3

4 months ago

2.0.3-beta

4 months ago

2.0.2

4 months ago

2.0.0-beta

4 months ago

2.0.3-next

4 months ago

2.0.0-next.1

4 months ago

2.0.1

4 months ago

2.0.0

4 months ago

2.0.2-next

4 months ago

2.0.1-alpha

5 months ago

2.0.0-beta.1

4 months ago

2.0.0-alpha

5 months ago

2.0.3-alpha

4 months ago

1.3.0

2 years ago

1.2.0

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.1

3 years ago

1.1.2

3 years ago

1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-beta.1

5 years ago

1.0.0-beta.0

5 years ago

0.3.0-beta.3

5 years ago

0.3.0-beta.2

5 years ago

0.3.0-beta.1

5 years ago

0.3.0-beta.0

5 years ago

0.2.1-0

5 years ago

0.2.0

5 years ago

0.2.0-beta.1

6 years ago

0.2.0-beta.0

6 years ago

0.1.0-alpha

6 years ago

0.1.0

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago