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