https://github.com/rmdort/react-async-load-script

A higher order React component to lazy load external javascript files sequentially
https://github.com/rmdort/react-async-load-script

Last synced: 18 days ago
JSON representation

A higher order React component to lazy load external javascript files sequentially

• Host: GitHub
• URL: https://github.com/rmdort/react-async-load-script
• Owner: rmdort
• License: mit
• Created: 2017-12-11T16:20:18.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:32:31.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T18:48:58.590Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 1.35 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 29
• Metadata Files:
  • Readme: Readme.md
  • License: License.md

Awesome Lists containing this project

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 


  }

}


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