{"library":"react-async-script","title":"React Async Script Loader","description":"react-async-script is a lightweight React Higher-Order Component (HOC) designed to facilitate the asynchronous loading of external third-party JavaScript scripts within React applications. It is particularly useful for integrating services like Google reCAPTCHA, Google Maps, or other widgets where scripts need to be loaded dynamically without blocking the main thread. The current stable version is 1.2.0, building upon the significant 1.0.0 rewrite that introduced modern React features. The library supports customizing script attributes, automatically registering global callback functions (e.g., for `onload` events), and exposing global variables created by the loaded scripts as props to the wrapped component. It also incorporates React's `forwardRef` for proper ref handling, requiring React version 16.4.1 or higher. While no explicit release cadence is stated, it receives updates to address issues and maintain compatibility with React. Its key differentiator is its focused approach as a simple HOC for script management.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-async-script"],"cli":null},"imports":["import makeAsyncScriptLoader from 'react-async-script';","const makeAsyncScriptLoader = require('react-async-script');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport makeAsyncScriptLoader from 'react-async-script';\n\n// A placeholder component that would typically consume the loaded script\nclass MyComponentNeedingScript extends React.Component {\n  componentDidUpdate(prevProps) {\n    // Access the global object exposed by the loaded script via props\n    if (!prevProps.googleMaps && this.props.googleMaps) {\n      console.log('Google Maps API is available:', this.props.googleMaps);\n      // Example: Initialize a map once the API is loaded\n      // new this.props.googleMaps.Map(document.getElementById('map'), { center: {lat: -34, lng: 151}, zoom: 8 });\n    }\n  }\n  render() {\n    return (\n      <div>\n        <p>Loading external script...</p>\n        {/* You might render a placeholder or a loading spinner here */}\n        <div id=\"map\" style={{ width: '100%', height: '300px' }}></div>\n      </div>\n    );\n  }\n}\n\n// Define the script URL, callback name, and the global object name\nconst SCRIPT_URL = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;\nconst CALLBACK_NAME = 'initMap';\nconst GLOBAL_NAME = 'googleMaps'; // The global object set by the script (e.g., window.googleMaps)\n\n// Wrap your component with the HOC\nconst GoogleMapsLoader = makeAsyncScriptLoader(SCRIPT_URL, {\n  callbackName: CALLBACK_NAME,\n  globalName: GLOBAL_NAME,\n  removeOnUnmount: true, // Optional: remove script tag when component unmounts\n})(MyComponentNeedingScript);\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this._myRef = React.createRef();\n  }\n\n  componentDidMount() {\n    console.log(\"Ref to MyComponentNeedingScript instance:\", this._myRef.current);\n  }\n\n  handleScriptLoad = () => {\n    console.log(\"External Google Maps script has finished loading!\");\n    // Any post-load actions can be performed here\n  };\n\n  render() {\n    return (\n      <div>\n        <h1>React Async Script Loader with Google Maps</h1>\n        <GoogleMapsLoader ref={this._myRef} asyncScriptOnLoad={this.handleScriptLoad} />\n      </div>\n    );\n  }\n}\n\n// Ensure a root element exists for React to render into\nconst rootElement = document.getElementById('root');\nif (!rootElement) {\n  const div = document.createElement('div');\n  div.id = 'root';\n  document.body.appendChild(div);\n}\n\nReactDOM.render(<App />, rootElement);\n\n// Simulate the global callback function that the Google Maps API calls\n// This must be a global function for the script to find it\nwindow[CALLBACK_NAME] = () => {\n  console.log(`Global callback '${CALLBACK_NAME}' executed.`);\n  // For Google Maps, the 'google.maps' global becomes available after this.\n  // The HOC will pick this up and pass 'googleMaps' as a prop.\n};\n","lang":"javascript","description":"Demonstrates how to use `makeAsyncScriptLoader` to load an external script (e.g., Google Maps API), handle its `onload` callback, access global variables exposed by the script, and utilize `forwardRef` with the wrapped component. Replace `YOUR_API_KEY` with an actual key.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}