shaneosullivan / reactdependentscript

React component that loads another JavaScript file before rendering it's child components

ReactDependentScript

ReactDependentScript is a simple React component used to lazily load JavaScript and CSS resources when you need them.

When integrating with third party software it is often necessary to load that project's JavaScript or CSS on to the page. The naive way to do this is to always include it in the HTML of the page, but this means you pay the cost up front of loading that code, when your React component may never be even used.

ReactDependentScript is a React component that wraps your component's definition, and makes sure to load the JavaScript and/or CSS first, then render your content. It ensures that the external content is only loaded once, regardless of how many times the render() function is called.

Using it

First install with

npm install react-dependent-script

or

yarn add react-dependent-script

Now wrap your custom content in the component, providing an array of URLs to scripts to load, and optionally a loadingComponent property containing a component to show while loading e.g.

import ReactDependentScript from 'react-dependent-script';
<ReactDependentScript
  loadingComponent={<div>jQuery is loading...</div>}
  scripts={['https://code.jquery.com/jquery-3.2.1.min.js']}
>
  <div>jQuery is loaded!</div>
</ReactDependentScript>

An alternative to rendering the child components is to provide a callback function to the renderChildren prop. This can be useful when you need to execute code that is only available after the remote script is loaded, e.g.

import ReactDependentScript from 'react-dependent-script';
<ReactDependentScript
  loadingComponent={<div>jQuery is loading...</div>}
  scripts={['https://code.jquery.com/jquery-3.2.1.min.js']}
  renderChildren={() => {
    return <div>Found {$('*').length} DOM nodes on the page</div>
  }}
>
</ReactDependentScript>

You can also load other interesting libraries, like Stripe

import ReactDependentScript from 'react-dependent-script';
<ReactDependentScript
  loadingComponent={<div>Loading Stripe...</div>}
  scripts={['https://js.stripe.com/v3/']}
>
  <div>Stripe script is loaded, here is your card!</div>
  <StripeProvider apiKey="pk_test_YOUR_KEY_HERE">
    <Elements>
      <CheckoutFormElements
        submitText="Submit"
        onTokenCreated={data => {
          console.log('token created', data);
        }}
        onTokenCreationFailed={data => {
          console.log('token failed', data);
        }}
      />
    </Elements>
  </StripeProvider>
</ReactDependentScript>

See the demo/src/index.js file for more complex examples, including loading CSS files.

Contributing

This project uses the nwb module for development. After checking out the code, you have three commands available to you:

• build builds the code into the es and lib folders. You generally don't need these.
• start starts the demo page, which is running the demo/src/index.js code. This is your usual development environment, where you'll write examples to validate any changes.
• clean cleans out all build artifacts

reactdependentscript's Issues

Load google map script multiple times

Having two component instances on one page makes it load dependant scripts multiple time and causes "error" in browser console:
You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

componentWillMount has been deprecated

    console.warn ../node_modules/react-dom/cjs/react-dom.development.js:11494
      Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
      
      * Move code with side effects to componentDidMount, and set initial state in the constructor.
      * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
      
      Please update the following components: ReactDependentScript

console log

Remove this line or makeing it dev enviroment conditional would probably be better.
I looks a bit bad in production.

59 console.log('_handleLoad', this.state.loadingCount, 'remaining');