Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-async-script
Advanced tools
Readme
*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.const AsyncScriptComponent = makeAsyncScriptLoader(URL)(Component);
// ---
<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:
const AsyncHoc = makeAsyncScriptLoader(URL)(ComponentNeedsScript);
class DisplayComponent extends React.Component {
constructor(props) {
super(props);
this._internalRef = React.createRef();
}
componentDidMount() {
console.log("ComponentNeedsScript's Instance -", this._internalRef.current);
}
render() { return (<AsyncHoc ref={this._internalRef} />)}
}
At least React@16.4.1
is required due to forwardRef
usage internally.
See https://github.com/dozoisch/react-google-recaptcha
// recaptcha.js
export class ReCAPTCHA extends React.Component {
componentDidUpdate(prevProps) {
// recaptcha has loaded via async script
if (!prevProps.grecaptcha && this.props.grecaptcha) {
this.props.grecaptcha.render(this._container)
}
}
render() { return (
<div ref={(r) => this._container = r} />)
}
}
// recaptcha-wrapper.js
import makeAsyncScriptLoader from "react-async-script";
import { ReCAPTCHA } from "./recaptcha";
const callbackName = "onloadcallback";
const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit`;
// the name of the global that recaptcha/api.js sets on window ie: window.grecaptcha
const globalName = "grecaptcha";
export default makeAsyncScriptLoader(URL, {
callbackName: callbackName,
globalName: globalName,
})(ReCAPTCHA);
// main.js
import ReCAPTCHAWrapper from "./recaptcha-wrapper.js"
const onLoad = () => console.log("script loaded")
React.render(
<ReCAPTCHAWrapper asyncScriptOnLoad={onLoad} />,
document.body
);
-export default makeAsyncScriptLoader(ReCAPTCHA, getURL, {
+export default makeAsyncScriptLoader(getURL, {
callbackName,
globalName,
- removeOnMount: initialOptions.removeOnMount || false,
+ removeOnUnmount: initialOptions.removeOnUnmount || false,
- exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
-});
+})(ReCAPTCHA);
Pre 1.0.0
and - React < React@16.4.1
support details in 0.11.1.
FAQs
A composition mixin for loading scripts asynchronously for React
The npm package react-async-script receives a total of 539,125 weekly downloads. As such, react-async-script popularity was classified as popular.
We found that react-async-script demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.