To help you get started, we've collected the most common ways that react-helmet-async is being used within popular public projects.

tomatau / breko-hub / test / test-setup.js View on Github

import { isBrowser, ConfigService } from 'app/utils'
import appConfig from 'config/app.config'
import helpers from './test-helpers'

configure({ adapter: new ReactSixteenAdapter() })

chai.use(require('chai-shallow-deep-equal'))
chai.use(require('chai-as-promised'))
chai.use(require('chai-enzyme')())
chai.use(require('sinon-chai'))
chai.use(require('chai-generator'))
chai.use(require('chai-jest-snapshot'))

process.env.APP_CONFIG = JSON.stringify(appConfig)

Helmet.defaultProps.defer = false

setGlobals(isBrowser ? window : global)

function setGlobals(global) {
  ConfigService.setEnv(process.env.CONFIG_ENV)
  ConfigService.assignVars(process.env.APP_CONFIG)

  global.global = global

  global.expect = expect
  global.sinon = sinon

  global.snap = snap

  global.shallow = shallow
  global.mount = mount

View more ways to use react-helmet-async

react-helmet-async

Announcement post on Times Open blog

This package is a fork of React Helmet. usage is synonymous, but server and client now requires 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 = (
  
    
      
        <title>Hello World</title>
        
      
      <h1>Hello World</h1>
    
  
);

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 = (
  
    
      
        <title>Hello World</title>
        
      
      <h1>Hello World</h1>
    
  
);

const html = renderToString(app);

const { helmet } = helmetContext;

// helmet.title.toString() etc…

Streams

This package only works with streaming if your `` 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 = (
  
    
      
        <title>Hello World</title>
        
      
      <h1>Hello World</h1>
    
  
);

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 `` component allows the server render of react-helmet-async to expose a method for prioritizing relevant SEO tags.

In the component:

  <title>A fancy webpage</title>
  
  
  
  

In your server template:

  
    ${helmet.title.toString()}
    ${helmet.priority.toString()}
    ${helmet.meta.toString()}
    ${helmet.link.toString()}
    ${helmet.script.toString()}
  
  ...

Will result in:

  
    <title>A fancy webpage</title>
    
    
    
    
  
  ...

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

Usage without Context

You can optionally use outside a context by manually creating a stateful `HelmetData` instance, and passing that stateful object to each 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 = (
    
      
        <title>Hello World</title>
        
      
      <h1>Hello World</h1>
    
);

const html = renderToString(app);

const { helmet } = helmetData.context;

License

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