react-load-script
Version:
react-load-script enables you to easily create components which depend on third party JS scripts
70 lines (49 loc) • 2.69 kB
Markdown
# react-load-script [](https://circleci.com/gh/blueberryapps/react-load-script) [](https://dependencyci.com/github/blueberryapps/react-load-script)
This package simplifies loading of 3rd party scripts in your React applications.
## Motivation
There are situations when you need to use a 3rd party JS library in your React application (jQuery, D3.js for rendering charts, etc.) but you don't need it everywhere and/or you want to use it only in a response to users actions. In cases like this, preloading the whole library when application starts is an unnecessary and expensive operation which could possibly slow down your application.
Using the `Script` component this package provides you with, you can easily load any 3rd party scripts your applications needs directly in a relevant component and show a placeholder while the script is loading (e.g. a loading animation). As soon as the script is fully loaded, a callback function you'll have passed to `Script` is called (see example below).
## Supported React versions
This package requires React 0.14.9 and higher.
## API
The package exports a single component with the following props:
### `onCreate`
Called as soon as the script tag is created.
### `onError` (required)
Called in case of an error with the script.
### `onLoad` (required)
Called when the requested script is fully loaded.
### `url` (required)
URL pointing to the script you want to load.
### `attributes`
An object used to define custom attributes to be set on the script element. For example, `attributes={{ id: 'someId', 'data-custom: 'value' }}` will result in `<script id="someId" data-custom="value" />`
## Example
You can use the following code to load jQuery in your app:
```jsx
import Script from 'react-load-script'
...
render() {
return (
<Script
url="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
onCreate={this.handleScriptCreate.bind(this)}
onError={this.handleScriptError.bind(this)}
onLoad={this.handleScriptLoad.bind(this)}
/>
)
}
...
handleScriptCreate() {
this.setState({ scriptLoaded: false })
}
handleScriptError() {
this.setState({ scriptError: true })
}
handleScriptLoad() {
this.setState({ scriptLoaded: true })
}
```
## License
MIT 2016
## Made with love by
[](https://www.blueberry.io)