Registry / web-framework / react-async-loader

react-async-loader

library0.1.2jsnpmunverified

Async script loading composition for React components, supporting jsonp and multiple script loading. Currently at version 0.1.2, with an API redesign in 0.1.0 that introduced mapScriptsToProps configuration. It provides a higher-order component to load external scripts (e.g., Google Maps) and inject them as props. Unlike libraries like react-loadable, it focuses on script injection rather than code splitting. Package has minimal dependencies: React >=0.13. Release cadence is low, with no newer versions since 2015.

web-framework

npm install react-async-loader

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ASYNC-LOADER

react-async-loader

web-frameworkjavascriptv0.1.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

asyncLoad

✓ import asyncLoad from 'react-async-loader'

✗ const asyncLoad = require('react-async-loader')

Default export; requires ESM or CommonJS transpilation.

asyncLoad (default)

✓ const asyncLoad = require('react-async-loader').default

✗ const asyncLoad = require('react-async-loader')

In CommonJS, the module.exports is the default export; using require without .default will not work in some bundlers.

Shows basic usage: wrap a component with asyncLoad to inject an external script as a prop.

import React from 'react'; import asyncLoad from 'react-async-loader'; const MyComponent = ({ loadedScript }) => ( <div>{loadedScript ? 'Script loaded' : 'Loading...'}</div> ); const mapScriptsToProps = (props) => ({ loadedScript: { globalPath: 'myLib', url: 'https://cdn.example.com/myLib.js', jsonp: false } }); export default asyncLoad(mapScriptsToProps)(MyComponent);

Debug

Known issues

gotchaThe script global path must exist on window after loading; otherwise the prop will be undefined.

fix

Ensure the script sets a global variable matching the globalPath key.

affects: *

deprecatedPackage has not been updated since 2015; may not work with React >16 or modern build tools.

fix

Consider using newer alternatives like react-loadable or @loadable/component for script loading.

affects: 0.1.2

breakingAPI changed in version 0.1.0: mapScriptsToProps now receives props and returns a config object; previous API was different.

fix

Upgrade to 0.1.0+ and update usage to pass a function that returns config.

affects: <0.1.0

Errors

Common errors & fixes

TypeError: Cannot read property 'default' of undefined

Using CommonJS require without .default when the module is an ES module default export.

fix

Use `const asyncLoad = require('react-async-loader').default;`

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The wrapped component is undefined because the script injection failed to load.

fix

Check that the script URL is accessible and the globalPath matches a property on window after loading.

Uncaught ReferenceError: someGlobal is not defined

The script has not loaded before the component renders, or the global variable does not exist.

fix

Ensure the script sets the expected global variable. Consider using jsonp: true if the script supports JSONP callbacks.

Upgrade

Version history

0.1.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components, version >=0.13 required.

hoist-non-react-staticsrequiredUsed internally to hoist static methods from wrapped component.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/EdStudio/react-async-loader ↗

packagehttps://www.npmjs.com/package/react-async-loader ↗