async-react-script-loader
v1.0.6
Published
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.
Downloads
7
Maintainers
Readme
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);