Gathering detailed insights and metrics for react-helmet
Gathering detailed insights and metrics for react-helmet
Gathering detailed insights and metrics for react-helmet
Gathering detailed insights and metrics for react-helmet
@types/react-helmet
TypeScript definitions for react-helmet
react-helmet-async
Thread-safe Helmet for React 16+ and friends
gatsby-plugin-react-helmet-async
Use react-helmet-async with Gatsby
gatsby-plugin-react-helmet
Manage document head data with react-helmet. Provides drop-in server rendering support for Gatsby.
npm install react-helmet
Typescript
Module System
Node Version
NPM Version
89
Supply Chain
98.7
Quality
81.4
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
461,614,025
Last Day
286,843
Last Week
1,835,560
Last Month
7,917,250
Last Year
91,947,698
17,414 Stars
349 Commits
660 Forks
108 Watching
42 Branches
67 Contributors
Minified
Minified + Gzipped
Latest Version
6.1.0
Package Id
react-helmet@6.1.0
Size
24.48 kB
NPM Version
6.14.4
Node Version
12.11.1
Publised On
08 Jun 2020
Cumulative downloads
Total Downloads
Last day
-3.3%
286,843
Compared to previous day
Last week
-0.6%
1,835,560
Compared to previous week
Last month
-2%
7,917,250
Compared to previous month
Last year
-4.1%
91,947,698
Compared to previous year
1
45
This reusable React component will manage all of your changes to the document head.
Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.
1import React from "react"; 2import {Helmet} from "react-helmet"; 3 4class Application extends React.Component { 5 render () { 6 return ( 7 <div className="application"> 8 <Helmet> 9 <meta charSet="utf-8" /> 10 <title>My Title</title> 11 <link rel="canonical" href="http://mysite.com/example" /> 12 </Helmet> 13 ... 14 </div> 15 ); 16 } 17};
Nested or latter components will override duplicate changes:
1<Parent> 2 <Helmet> 3 <title>My Title</title> 4 <meta name="description" content="Helmet application" /> 5 </Helmet> 6 7 <Child> 8 <Helmet> 9 <title>Nested Title</title> 10 <meta name="description" content="Nested component" /> 11 </Helmet> 12 </Child> 13</Parent>
outputs:
1<head> 2 <title>Nested Title</title> 3 <meta name="description" content="Nested component"> 4</head>
See below for a full reference guide.
title
, base
, meta
, link
, script
, noscript
, and style
tags.body
, html
and title
tags.Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.
Yarn:
1yarn add react-helmet
npm:
1npm install --save react-helmet
To use on the server, call Helmet.renderStatic()
after ReactDOMServer.renderToString
or ReactDOMServer.renderToStaticMarkup
to get the head data for use in your prerender.
Because this component keeps track of mounted instances, you have to make sure to call renderStatic
on server, or you'll get a memory leak.
1ReactDOMServer.renderToString(<Handler />); 2const helmet = Helmet.renderStatic();
This helmet
instance contains the following properties:
base
bodyAttributes
htmlAttributes
link
meta
noscript
script
style
title
Each property contains toComponent()
and toString()
methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by toComponent()
. E.g:
1const html = ` 2 <!doctype html> 3 <html ${helmet.htmlAttributes.toString()}> 4 <head> 5 ${helmet.title.toString()} 6 ${helmet.meta.toString()} 7 ${helmet.link.toString()} 8 </head> 9 <body ${helmet.bodyAttributes.toString()}> 10 <div id="content"> 11 // React stuff here 12 </div> 13 </body> 14 </html> 15`;
1function HTML () { 2 const htmlAttrs = helmet.htmlAttributes.toComponent(); 3 const bodyAttrs = helmet.bodyAttributes.toComponent(); 4 5 return ( 6 <html {...htmlAttrs}> 7 <head> 8 {helmet.title.toComponent()} 9 {helmet.meta.toComponent()} 10 {helmet.link.toComponent()} 11 </head> 12 <body {...bodyAttrs}> 13 <div id="content"> 14 // React stuff here 15 </div> 16 </body> 17 </html> 18 ); 19}
If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the webpack file
so that the same instance of react-helmet
is used.
externals: ["react-helmet"],
Or to import the react-helmet instance from the app on the server.
1<Helmet 2 {/* (optional) set to false to disable string encoding (server-only) */} 3 encodeSpecialCharacters={true} 4 5 {/* 6 (optional) Useful when you want titles to inherit from a template: 7 8 <Helmet 9 titleTemplate="%s | MyAwesomeWebsite.com" 10 > 11 <title>Nested Title</title> 12 </Helmet> 13 14 outputs: 15 16 <head> 17 <title>Nested Title | MyAwesomeWebsite.com</title> 18 </head> 19 */} 20 titleTemplate="MySite.com - %s" 21 22 {/* 23 (optional) used as a fallback when a template exists but a title is not defined 24 25 <Helmet 26 defaultTitle="My Site" 27 titleTemplate="My Site - %s" 28 /> 29 30 outputs: 31 32 <head> 33 <title>My Site</title> 34 </head> 35 */} 36 defaultTitle="My Default Title" 37 38 {/* (optional) callback that tracks DOM changes */} 39 onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)} 40> 41 {/* html attributes */} 42 <html lang="en" amp /> 43 44 {/* body attributes */} 45 <body className="root" /> 46 47 {/* title attributes and value */} 48 <title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title> 49 50 {/* base element */} 51 <base target="_blank" href="http://mysite.com/" /> 52 53 {/* multiple meta elements */} 54 <meta name="description" content="Helmet application" /> 55 <meta property="og:type" content="article" /> 56 57 {/* multiple link elements */} 58 <link rel="canonical" href="http://mysite.com/example" /> 59 <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" /> 60 <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" /> 61 {locales.map((locale) => { 62 <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/> 63 })} 64 65 {/* multiple script elements */} 66 <script src="http://include.com/pathtojs.js" type="text/javascript" /> 67 68 {/* inline script elements */} 69 <script type="application/ld+json">{` 70 { 71 "@context": "http://schema.org" 72 } 73 `}</script> 74 75 {/* noscript elements */} 76 <noscript>{` 77 <link rel="stylesheet" type="text/css" href="foo.css" /> 78 `}</noscript> 79 80 {/* inline style elements */} 81 <style type="text/css">{` 82 body { 83 background-color: blue; 84 } 85 86 p { 87 font-size: 12px; 88 } 89 `}</style> 90</Helmet>
Please take a moment to review the guidelines for contributing.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/10 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
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
100 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
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