Gathering detailed insights and metrics for @zudoku/react-helmet-async
Installations
npm install @zudoku/react-helmet-asyncDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.18.0
NPM Version
10.8.2
Score
73.4
Supply Chain
99
Quality
83.5
Maintenance
100
Vulnerability
100
License
Releases
2
Contributors
27
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (99.61%)
JavaScript (0.39%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
staylor
Download Statistics
Total Downloads
9,022
Last Day
9
Last Week
9
Last Month
1,412
Last Year
9,022
GitHub Statistics
2,170 Stars
171 Commits
158 Forks
13 Watching
17 Branches
27 Contributors
Bundle Size
13.92 kB
Minified
5.15 kB
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
2.0.5
Package Id
@zudoku/react-helmet-async@2.0.5
Unpacked Size
84.30 kB
Size
16.47 kB
File Count
14
NPM Version
10.8.2
Node Version
20.18.0
Publised On
28 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
9,022
Last day
0%
9
Compared to previous day
Last week
-97.4%
9
Compared to previous week
Last month
-2.8%
1,412
Compared to previous month
Last year
0%
9,022
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Dev Dependencies
26
@commitlint/cli@commitlint/config-conventional@remix-run/eslint-config@testing-library/jest-dom@testing-library/react@types/eslint@types/invariant@types/jsdom@types/react@types/shallowequal@vitejs/plugin-reactesbuildeslinteslint-config-prettiereslint-plugin-prettierhuskyjsdomprettierrafreactreact-domrimraftsxtypescriptvitevitest
Versions
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:
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { Helmet, HelmetProvider } from 'react-helmet-async'; 4 5const app = ( 6 <HelmetProvider> 7 <App> 8 <Helmet> 9 <title>Hello World</title> 10 <link rel="canonical" href="https://www.tacobell.com/" /> 11 </Helmet> 12 <h1>Hello World</h1> 13 </App> 14 </HelmetProvider> 15); 16 17ReactDOM.hydrate( 18 app, 19 document.getElementById(‘app’) 20);
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.
1import React from 'react'; 2import { renderToString } from 'react-dom/server'; 3import { Helmet, HelmetProvider } from 'react-helmet-async'; 4 5const helmetContext = {}; 6 7const app = ( 8 <HelmetProvider context={helmetContext}> 9 <App> 10 <Helmet> 11 <title>Hello World</title> 12 <link rel="canonical" href="https://www.tacobell.com/" /> 13 </Helmet> 14 <h1>Hello World</h1> 15 </App> 16 </HelmetProvider> 17); 18 19const html = renderToString(app); 20 21const { helmet } = helmetContext; 22 23// 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:
1import through from 'through'; 2import { renderToNodeStream } from 'react-dom/server'; 3import { getDataFromTree } from 'react-apollo'; 4import { Helmet, HelmetProvider } from 'react-helmet-async'; 5import template from 'server/template'; 6 7const helmetContext = {}; 8 9const app = ( 10 <HelmetProvider context={helmetContext}> 11 <App> 12 <Helmet> 13 <title>Hello World</title> 14 <link rel="canonical" href="https://www.tacobell.com/" /> 15 </Helmet> 16 <h1>Hello World</h1> 17 </App> 18 </HelmetProvider> 19); 20 21await getDataFromTree(app); 22 23const [header, footer] = template({ 24 helmet: helmetContext.helmet, 25}); 26 27res.status(200); 28res.write(header); 29renderToNodeStream(app) 30 .pipe( 31 through( 32 function write(data) { 33 this.queue(data); 34 }, 35 function end() { 36 this.queue(footer); 37 this.queue(null); 38 } 39 ) 40 ) 41 .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.
1import { HelmetProvider } from 'react-helmet-async'; 2 3HelmetProvider.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:
1<Helmet prioritizeSeoTags> 2 <title>A fancy webpage</title> 3 <link rel="notImportant" href="https://www.chipotle.com" /> 4 <meta name="whatever" value="notImportant" /> 5 <link rel="canonical" href="https://www.tacobell.com" /> 6 <meta property="og:title" content="A very important title"/> 7</Helmet>
In your server template:
1<html> 2 <head> 3 ${helmet.title.toString()} 4 ${helmet.priority.toString()} 5 ${helmet.meta.toString()} 6 ${helmet.link.toString()} 7 ${helmet.script.toString()} 8 </head> 9 ... 10</html>
Will result in:
1<html> 2 <head> 3 <title>A fancy webpage</title> 4 <meta property="og:title" content="A very important title"/> 5 <link rel="canonical" href="https://www.tacobell.com" /> 6 <meta name="whatever" value="notImportant" /> 7 <link rel="notImportant" href="https://www.chipotle.com" /> 8 </head> 9 ... 10</html>
A list of prioritized tags and attributes can be found in constants.ts.
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:
1import React from 'react'; 2import { renderToString } from 'react-dom/server'; 3import { Helmet, HelmetProvider, HelmetData } from 'react-helmet-async'; 4 5const helmetData = new HelmetData({}); 6 7const app = ( 8 <App> 9 <Helmet helmetData={helmetData}> 10 <title>Hello World</title> 11 <link rel="canonical" href="https://www.tacobell.com/" /> 12 </Helmet> 13 <h1>Hello World</h1> 14 </App> 15); 16 17const html = renderToString(app); 18 19const { helmet } = helmetData.context;
License
Licensed under the Apache 2.0 License, Copyright © 2018 Scott Taylor
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
Found 6/15 approved changesets -- score normalized to 4
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 25 are checked with a SAST tool
Reason
12 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-92r3-m2mg-pj97
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.6
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More