Async script loader HOC for React
npm install react-async-load-scriptA higher order React component to lazy load external javascript files. Scripts are loaded sequentially.
Note: Requires Promise polyfill
`````
yarn add react-async-load-script
``
import scriptLoader from 'react-async-load-script'
scriptLoader([...scripts])(YourComponent)
``
``
class D3Chart extends React.Component {
componentDidUpdate (prevProps) {
if (
prevProps.isScriptLoadSucceed !== this.props.isScriptLoadSucceed &&
this.props.isScriptLoadSucceed
) {
// Initialize d3 chart
console.log(d3)
}
}
render () {
return
}
}
export default scriptLoader([
'https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js
])(D3Chart)
``
Your component will receive the following props
|Name|Type|Description|
|----|----|-----------|
|isScriptLoaded|boolean|Indicates if scripts have been loaded|
|isScriptLoadSuccess|boolean|Indicates if all scripts are loaded without error|
`````
yarn test
MIT