# react-load-script

> react-load-script enables you to easily create components which depend on third party JS scripts

Latest version **0.0.6** (published 2017-07-12) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-load-script
pnpm add react-load-script
yarn add react-load-script
bun add react-load-script
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2017-07-12 |
| First published | 2016-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 358 |
| Author | Blueberry |
| Maintainers | jkottnauer |
| Keywords | react, script |

## Links

- npm: https://www.npmjs.com/package/react-load-script
- Repository: https://github.com/blueberryapps/react-load-script
- Homepage: https://github.com/blueberryapps/react-load-script#readme
- Issues: https://github.com/blueberryapps/react-load-script/issues
- npm.io page: https://npm.io/package/react-load-script

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2017-07-12
- 0.0.5 — 2017-07-09
- 0.0.4 — 2017-05-30
- 0.0.4-alpha — 2017-05-30
- 0.0.3 — 2017-04-29
- 0.0.2 — 2016-05-22
- 0.0.1 — 2016-05-18

## 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 `<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://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)

---
_Source: https://npm.io/package/react-load-script · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._