react-async-load-script

Async script loader HOC for React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-async-load-script
1.0.74 years ago5 years agoMinified + gzip package size for react-async-load-script in KB

Readme

React async script loader
A higher order React component to lazy load external javascript files. Scripts are loaded sequentially.
Note: Requires Promise polyfill

Installation

```` yarn add react-async-load-script ````

Usage

```` import scriptLoader from 'react-async-load-script'
scriptLoader(...scripts)(YourComponent) ````

Example

```` class D3Chart extends React.Component { componentDidUpdate (prevProps) {
if (
  prevProps.isScriptLoadSucceed !== this.props.isScriptLoadSucceed && 
  this.props.isScriptLoadSucceed
) {
  // Initialize d3 chart
  console.log(d3)
}
} render () {
return <div className='chart' />
} }
export default scriptLoader( 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js )(D3Chart) ````

Properties

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|

Test

```` yarn test ````

License

MIT