Gathering detailed insights and metrics for react-async-script
Gathering detailed insights and metrics for react-async-script
Gathering detailed insights and metrics for react-async-script
Gathering detailed insights and metrics for react-async-script
A React composition mixin for loading 3rd party scripts asynchronously
npm install react-async-script
Typescript
Module System
Node Version
NPM Version
96.5
Supply Chain
100
Quality
75.5
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
132,759,252
Last Day
25,289
Last Week
808,512
Last Month
3,412,752
Last Year
36,673,750
MIT License
177 Stars
182 Commits
29 Forks
5 Watchers
2 Branches
11 Contributors
Updated on Sep 05, 2024
Minified
Minified + Gzipped
Latest Version
1.2.0
Package Id
react-async-script@1.2.0
Unpacked Size
41.37 kB
Size
9.56 kB
File Count
10
NPM Version
6.14.4
Node Version
12.17.0
Cumulative downloads
Total Downloads
Last Day
0.1%
25,289
Compared to previous day
Last Week
-3.3%
808,512
Compared to previous week
Last Month
3.7%
3,412,752
Compared to previous month
Last Year
20.3%
36,673,750
Compared to previous year
*NOTE - These are the docs for the upcoming 1.0.0
release - for v0.11.1
documention go to tag here: 0.11.1
A React HOC for loading 3rd party scripts asynchronously. This HOC allows you to wrap a component that needs 3rd party resources, like reCAPTCHA or Google Maps, and have them load the script asynchronously.
makeAsyncScriptLoader(getScriptUrl, options)(Component)
Component
: The Component to wrap.getScriptUrl
: string or function that returns the full URL of the script tag.options
(optional):
attributes
: object : If the script needs attributes (such as data-
attributes), then provide them as key/value pairs of strings and they will be added to the generated script tag.callbackName
: string : If the script needs to call a global function when finished loading (for example: recaptcha/api.js?onload=callbackName
). Please provide the callback name here and it will be autoregistered on window
for you.globalName
: string : Can provide the name of the global that the script attaches to window
. Async-script will pass this as a prop to the wrapped component. (props[globalName] = window[globalName]
)removeOnUnmount
: boolean default=false : If set to true
removes the script tag when component unmounts.scriptId
: string : If set, it adds the following id on the script tag.1const AsyncScriptComponent = makeAsyncScriptLoader(URL)(Component); 2// --- 3<AsyncScriptComponent asyncScriptOnLoad={callAfterScriptLoads} />
asyncScriptOnLoad
: function : called after script finishes loading. using script.onload
react-async-script
uses react's forwardRef
method to pass along the ref
applied to the wrapped component.
If you pass a ref
prop you'll have access to your wrapped components instance. See the tests for detailed example.
Simple Example:
1const AsyncHoc = makeAsyncScriptLoader(URL)(ComponentNeedsScript); 2 3class DisplayComponent extends React.Component { 4 constructor(props) { 5 super(props); 6 this._internalRef = React.createRef(); 7 } 8 componentDidMount() { 9 console.log("ComponentNeedsScript's Instance -", this._internalRef.current); 10 } 11 render() { return (<AsyncHoc ref={this._internalRef} />)} 12}
At least React@16.4.1
is required due to forwardRef
usage internally.
See https://github.com/dozoisch/react-google-recaptcha
1// recaptcha.js 2export class ReCAPTCHA extends React.Component { 3 componentDidUpdate(prevProps) { 4 // recaptcha has loaded via async script 5 if (!prevProps.grecaptcha && this.props.grecaptcha) { 6 this.props.grecaptcha.render(this._container) 7 } 8 } 9 render() { return ( 10 <div ref={(r) => this._container = r} />) 11 } 12} 13 14// recaptcha-wrapper.js 15import makeAsyncScriptLoader from "react-async-script"; 16import { ReCAPTCHA } from "./recaptcha"; 17 18const callbackName = "onloadcallback"; 19const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit`; 20// the name of the global that recaptcha/api.js sets on window ie: window.grecaptcha 21const globalName = "grecaptcha"; 22 23export default makeAsyncScriptLoader(URL, { 24 callbackName: callbackName, 25 globalName: globalName, 26})(ReCAPTCHA); 27 28// main.js 29import ReCAPTCHAWrapper from "./recaptcha-wrapper.js" 30 31const onLoad = () => console.log("script loaded") 32 33React.render( 34 <ReCAPTCHAWrapper asyncScriptOnLoad={onLoad} />, 35 document.body 36);
1-export default makeAsyncScriptLoader(ReCAPTCHA, getURL, { 2+export default makeAsyncScriptLoader(getURL, { 3 callbackName, 4 globalName, 5- removeOnMount: initialOptions.removeOnMount || false, 6+ removeOnUnmount: initialOptions.removeOnUnmount || false, 7- exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"], 8-}); 9+})(ReCAPTCHA);
Pre 1.0.0
and - React < React@16.4.1
support details in 0.11.1.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/8 approved changesets -- score normalized to 5
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
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
11 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-23
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