Note Jsx bugs solved in version 1.0.6

Async Script Loader for React

A versatile and lightweight npm package for dynamically loading external JavaScript scripts in React applications. Simplify the integration of third-party libraries, APIs, and scripts while ensuring optimal performance and asynchronous loading.

Installation

You can install the async-react-script-loader package using npm or yarn:

1npm install async-react-script-loader --save
2# or
3yarn add async-react-script-loader
4

usage

Import the scriptLoader function from the package at the top of your component file.

1import scriptLoader from "async-react-script-loader";

Here's a simple example of loading Google Maps API using the async-react-script-loader:

1import React from "react";
2import scriptLoader from "async-react-script-loader";
3
4class MapComponent extends React.Component {
5  componentDidMount() {
6    // The Google Maps script is loaded and can be used here
7    const map = new window.google.maps.Map(document.getElementById("map"), {
8      center: { lat: -34.397, lng: 150.644 },
9      zoom: 8,
10    });
11  }
12
13  render() {
14    return (
15      <div>
16        <div id="map" style={{ width: "100%", height: "400px" }}></div>
17      </div>
18    );
19  }
20}
21
22export default scriptLoader([
23  "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places",
24])(MapComponent);

To use the async-react-script-loader in your React functional component, follow these steps

1import React, { useEffect } from "react";
2import scriptLoader from "async-react-script-loader";
3
4const App = () => {
5  useEffect(() => {
6    // The Google Maps script is loaded and can be used here
7    const map = new window.google.maps.Map(document.getElementById("map"), {
8      center: { lat: -34.397, lng: 150.644 },
9      zoom: 8,
10    });
11  }, []);
12
13  return (
14    <div>
15      <div id="map" style={{ width: "100%", height: "400px" }}></div>
16    </div>
17  );
18};
19
20export default scriptLoader([
21  "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places",
22])(App);