https://github.com/blueberryapps/react-load-script

React component that makes it easy to load 3rd party scripts
https://github.com/blueberryapps/react-load-script

blueberry-opensource javascript loader react script

Last synced: about 7 hours ago
JSON representation

React component that makes it easy to load 3rd party scripts

• Host: GitHub
• URL: https://github.com/blueberryapps/react-load-script
• Owner: blueberryapps
• License: mit
• Created: 2016-05-02T09:46:18.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T21:52:52.000Z (almost 2 years ago)
• Last Synced: 2024-09-07T21:00:07.836Z (2 months ago)
• Topics: blueberry-opensource, javascript, loader, react, script
• Language: JavaScript
• Homepage:
• Size: 285 KB
• Stars: 360
• Watchers: 24
• Forks: 30
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-load-script [![CircleCI](https://circleci.com/gh/blueberryapps/react-load-script.svg?style=svg)](https://circleci.com/gh/blueberryapps/react-load-script) [![Dependency Status](https://dependencyci.com/github/blueberryapps/react-load-script/badge)](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 ``

## Example

You can use the following code to load jQuery in your app:

```jsx

import Script from 'react-load-script'

...

render() {

  return (

    

  )

}

...

handleScriptCreate() {

  this.setState({ scriptLoaded: false })

}

handleScriptError() {

  this.setState({ scriptError: true })

}

handleScriptLoad() {

  this.setState({ scriptLoaded: true })

}

```

## License

MIT 2016

## Made with love by

[![](https://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)