react-helmet-async

v1.0.7

Thread-safe Helmet for React 16+ and friends

NPM

README

GitHub

Apache-2.0

Latest version published 4 months ago

    npm install react-helmet-async

Explore Similar Packages

react-helmet 80 / 100

Package Health Score

71 / 100

Popularity
Influential project
Maintenance
Sustainable
Security
No known security issues
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Influential project

Weekly Downloads (2,020,324)

Dependents: 326
GitHub Stars: 1.02K
Forks: 61
Contributors: 20

The npm package react-helmet-async receives a total of 2,020,324 downloads a week. As such, we scored react-helmet-async popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package react-helmet-async, we found that it has been starred 1,025 times, and that 326 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

0.0.5

0.1.0

0.2.0

1.0.7

Indirect Vulnerabilities

0.0.5

0.1.0

0.2.0

1.0.7

License Risks

0.0.5

0.1.0

0.2.0

1.0.7

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

Apache-2.0

Security Policy

We found a way for you to contribute to the project! Looks like react-helmet-async is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like react-helmet-async is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test react-helmet-async

Keep your project free of vulnerabilities with Snyk

Maintenance

Sustainable

Commit Frequency

Open Issues: 25
Merged PR: 29
Open PR: 9
Last Commit: 2 months ago

Further analysis of the maintenance status of react-helmet-async based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that react-helmet-async demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the react-helmet-async repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-helmet-async is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 3 years
Dependencies: 5 Direct
Versions: 26
Install Size: 277 kB
Dist-tags: 3
# of Files: 22
Maintainers: 1
TS Typings: Yes

react-helmet-async has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

react-helmet-async

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;

License