react-async-script

What is react-async-script?

The react-async-script npm package allows you to load external scripts asynchronously in your React applications. This can be particularly useful for integrating third-party libraries or services that require script loading, such as Google Maps, payment gateways, or analytics tools.

What are react-async-script's main functionalities?

Load External Scripts

This feature allows you to load an external script asynchronously and handle the script's loading state within your React component. The example demonstrates how to use the asyncScriptLoader HOC to load a script and check its loading status.

import React from 'react';
import asyncScriptLoader from 'react-async-script';

class MyComponent extends React.Component {
  componentDidMount() {
    if (this.props.isScriptLoaded && this.props.isScriptLoadSucceed) {
      // Script loaded successfully
      console.log('Script loaded successfully');
    } else if (this.props.isScriptLoaded && !this.props.isScriptLoadSucceed) {
      // Script failed to load
      console.error('Script failed to load');
    }
  }

  render() {
    return <div>My Component</div>;
  }
}

export default asyncScriptLoader('https://example.com/external-script.js')(MyComponent);

Handle Script Load Success and Failure

This feature allows you to handle the success and failure of script loading within the componentDidUpdate lifecycle method. The example shows how to check the script's loading status and handle it accordingly.

import React from 'react';
import asyncScriptLoader from 'react-async-script';

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.isScriptLoaded !== this.props.isScriptLoaded) {
      if (this.props.isScriptLoaded && this.props.isScriptLoadSucceed) {
        // Script loaded successfully
        console.log('Script loaded successfully');
      } else if (this.props.isScriptLoaded && !this.props.isScriptLoadSucceed) {
        // Script failed to load
        console.error('Script failed to load');
      }
    }
  }

  render() {
    return <div>My Component</div>;
  }
}

export default asyncScriptLoader('https://example.com/external-script.js')(MyComponent);

Other packages similar to react-async-script

react-load-script

The react-load-script package provides a React component for loading external scripts. It offers similar functionality to react-async-script but uses a component-based approach instead of a higher-order component (HOC). This can be more intuitive for developers who prefer using components over HOCs.

react-helmet

The react-helmet package allows you to manage changes to the document head, including loading external scripts. While it is more general-purpose and not specifically focused on script loading, it provides a flexible way to include external scripts along with other head elements like meta tags and title.

README

React Async Script Loader

A React composition mixin for loading 3rd party scripts asynchronously. This component allows you to wrap component that needs 3rd party resources, like reCAPTCHA or Google Maps, and have them load the script asynchronously.

With React 0.13, mixins are getting deprecated in favor of composition.

After reading this article, Mixins Are Dead. Long Live Composition, I decided push react-script-loader a bit further and make a composition function that wraps component.

Usage

The api is very simple makeAsyncScriptLoader(Component, scriptUrl, options). Where options can contain exposeFuncs, callbackName and globalName.

• Component: The component to wrap.
• scriptUrl: the full of the script tag.
• options (optional):
  • exposeFuncs: Array of String. It'll create a function that will call the child component with the same name. It passes arguments and return value.
  • callbackName: If the scripts calls a global function when loaded, provide the callback name here. It'll be autoregistered on the window.
  • globalName: If wanted, provide the globalName of the loaded script. It'll be injected on the component with the same name (ex: "grecaptcha")

You can retrieve the child component using the fonction called getComponent().

Example

See https://github.com/dozoisch/react-google-recaptcha

// recaptcha-wrapper.js
"use strict";
import React from "react";

import ReCAPTCHA from "./recaptcha";
import makeAsyncScriptLoader from "./react-async-script";

const callbackName = "onloadcallback";
const URL = `https://www.google.com/recaptcha/api.js?onload=${callbackName}&render=explicit`;
const globalName = "grecaptcha";

export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
  callbackName: callbackName,
  globalName: globalName,
});

// main.js
"use strict";
import React from "react";
import ReCAPTHAWrapper from "./recaptcha-wrapper.js"

function onLoad() {
  console.log("script loaded");
}

let reCAPTCHAprops = {
  siteKey: "xxxxxxx",
  //...
};

React.render(
  <ReCAPTHAWrapper asyncScriptOnLoad={onLoad} {...reCAPTCHAprops} />,
  document.body
);

Expose Functions

This is really useful if the child component has some utility functions (like getValue) that you would like the wrapper to expose.

You can still retrieve the child component using getComponent().

Example

const MockedComponent = React.createClass({
  displayName: "MockedComponent",

  callsACallback(fn) {
    fn();
  },

  render() {
    return <span/>;
  }
});

let ComponentWrapper = makeAsyncScriptLoader(MockedComponent, "http://example.com", {
  exposeFuncs: ["callsACallback"]
});
let instance = ReactTestUtils.renderIntoDocument(
  <ComponentWrapper />
);
instance.callsACallback(function () { console.log("Called from child", this.constructor.displayName); });

---

Inspired by react-script-loader

The build tools are highly inspired by react-bootstrap