Nearly Pooped Myself

    react-async-load-script

    1.0.7 • Public • Published

    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

    Keywords

    none

    Install

    npm i react-async-load-script

    DownloadsWeekly Downloads

    75

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    169 kB

    Total Files

    12

    Last publish

    Collaborators

    • rmdort