# react-async-script-loader

> A decorator for script lazy loading on react component

Latest version **0.3.0** (published 2017-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-async-script-loader
pnpm add react-async-script-loader
yarn add react-async-script-loader
bun add react-async-script-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2017-05-29 |
| First published | 2015-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 254 |
| Author | leozdgao |
| Maintainers | leozdgao |
| Keywords | react, reactjs, react-component |

## Links

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

## Dependencies (1)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^1.0.3

## 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.3.0 (latest) — 2017-05-29
- 0.2.2 — 2016-11-23
- 0.2.1 — 2016-04-10
- 0.2.0 — 2016-04-02
- 0.1.1 — 2015-11-17
- 0.1.0 — 2015-11-17

## README

# react-async-script-loader

[![Build Status](https://travis-ci.org/leozdgao/react-async-script-loader.svg?branch=master)](https://travis-ci.org/leozdgao/react-async-script-loader) [![npm version](https://badge.fury.io/js/react-async-script-loader.svg)](https://badge.fury.io/js/react-async-script-loader)

A decorator for script lazy loading on react component.

## Description

Some component may depend on other vendors which you may not want to load them until you really need them. So here it is, use **High Order Component** to decorate your component and it will handle lazy loading for you, it support parallel and sequential loading.

## Installation

```bash
npm install --save react-async-script-loader
```

## API

```javascript
scriptLoader(...scriptSrc)([WrappedComponent])
```

`scriptSrc` can be a string of source or an array of source. `scriptSrc` will be loaded sequentially, but array of source will be loaded parallelly. It also cache the loaded script to avoid duplicated loading. More lively description see use case below.

## Properties

Decorated component will receive following properties:

|Name|Type|Description|
|----|----|-----------|
|isScriptLoaded|Boolean|Represent scripts loading process is over or not, maybe part of scripts load failed.|
|isScriptLoadSucceed|Boolean|Represent all scripts load successfully or not.|
|onScriptLoaded|Function|Triggered when all scripts load successfully.|

## How to use

You can use it to decorate your component.

```javascript
import React, { Component } from 'react'
import scriptLoader from 'react-async-script-loader'

class Editor extends Component {
  ...

  componentWillReceiveProps ({ isScriptLoaded, isScriptLoadSucceed }) {
    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
      if (isScriptLoadSucceed) {
        this.initEditor()
      }
      else this.props.onError()
    }
  }

  componentDidMount () {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props
    if (isScriptLoaded && isScriptLoadSucceed) {
      this.initEditor()
    }
  }

  ...
}

export default scriptLoader(
  [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
  ],
  '/assets/bootstrap-markdown.js'
)(Editor)
```

The example above means that the `jquery` and `marked` will be loading parallelly, and after loaded these 2 vendors, load `bootstrap-markdown` sequentially.

It is possible that some script will be failed to load. ScriptLoader will cache the script that load successfully and will remove the script node which fail to load before.

*Currently, if you try to reload scripts, you have to remount your component.*

And it's cooler if you use decorator syntax. (ES7)

```javascript
@scriptLoader(
  [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
  ],
  '/assets/bootstrap-markdown.js'
)
class Editor extends Component {

}
```

## license

MIT

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