Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-load-script
Advanced tools
react-load-script enables you to easily create components which depend on third party JS scripts
This package simplifies loading of 3rd party scripts in your React applications.
There are situations when you need to use a 3rd party JS library in your React application (jQuery, D3.js for rendering charts, etc.) but you don't need it everywhere and/or you want to use it only in a response to users actions. In cases like this, preloading the whole library when application starts is an unnecessary and expensive operation which could possibly slow down your application.
Using the Script
component this package provides you with, you can easily load any 3rd party scripts your applications needs directly in a relevant component and show a placeholder while the script is loading (e.g. a loading animation). As soon as the script is fully loaded, a callback function you'll have passed to Script
is called (see example below).
This package requires React 0.14.9 and higher.
The package exports a single component with the following props:
onCreate
Called as soon as the script tag is created.
onError
(required)Called in case of an error with the script.
onLoad
(required)Called when the requested script is fully loaded.
url
(required)URL pointing to the script you want to load.
attributes
An object used to define custom attributes to be set on the script element. For example, attributes={{ id: 'someId', 'data-custom: 'value' }}
will result in <script id="someId" data-custom="value" />
You can use the following code to load jQuery in your app:
import Script from 'react-load-script'
...
render() {
return (
<Script
url="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
onCreate={this.handleScriptCreate.bind(this)}
onError={this.handleScriptError.bind(this)}
onLoad={this.handleScriptLoad.bind(this)}
/>
)
}
...
handleScriptCreate() {
this.setState({ scriptLoaded: false })
}
handleScriptError() {
this.setState({ scriptError: true })
}
handleScriptLoad() {
this.setState({ scriptLoaded: true })
}
MIT 2016
FAQs
react-load-script enables you to easily create components which depend on third party JS scripts
We found that react-load-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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.