async-react-script-loader v1.0.6

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:

npm install async-react-script-loader --save
# or
yarn add async-react-script-loader

usage

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

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

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

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

class MapComponent extends React.Component {
  componentDidMount() {
    // The Google Maps script is loaded and can be used here
    const map = new window.google.maps.Map(document.getElementById("map"), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }

  render() {
    return (
      <div>
        <div id="map" style={{ width: "100%", height: "400px" }}></div>
      </div>
    );
  }
}

export default scriptLoader([
  "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places",
])(MapComponent);

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

import React, { useEffect } from "react";
import scriptLoader from "async-react-script-loader";

const App = () => {
  useEffect(() => {
    // The Google Maps script is loaded and can be used here
    const map = new window.google.maps.Map(document.getElementById("map"), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }, []);

  return (
    <div>
      <div id="map" style={{ width: "100%", height: "400px" }}></div>
    </div>
  );
};

export default scriptLoader([
  "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places",
])(App);