@jongleberry/react-asset-loader

@jongleberry/react-asset-loader"">




@jongleberry/react-asset-loader"">

A wrapper component that loads assets for you.
Useful when you need to load external scripts only on certain components.

• Define asset URLs by name.
• Loads assets only once per URL globally.
• Option to add callbacks to asset loads.
• Supports CSS.
• Simplified control flow using promises.

Example

Define your asset:

import { set } from '@jongleberry/react-asset-loader'
set('stripe', {
  url: 'https://js.stripe.com/v2/',
  // loads this asset in a global <script>
  type: 'js',
  // this logic will happen before the promise resolves
  resolve: x => x.then(() => Stripe.setPublishableKey('pk_test_somestuff'))
})

Return a wrapped component:

import AssetLoader from '@jongleberry/react-asset-loader'
import SomeComponent from '../SomeComponent'
export default AssetLoader(Component, [
  'stripe'
])

Only show the original component if the Stripe SDK is loaded:

import React, { Component, PropTypes } from 'react'
export default class SomeComponent extends Component {
  static propTypes = {
    assetsFulfilled: PropTypes.bool.isRequired,
  }
  render () {
    if (!this.props.assetsFulfilled) return null
    return (
      <div>Hello world</div>
    )
  }
}

API

set(name, options)

You need to define all your assets before using the asset loader.

Options are:

• url - URL of the asset
• resolve - a function to wrap the promise in. Signature: x => x.then(script => console.log(script))
• type - type of asset, either js or css

const WrappedComponent = AssetLoader(Component, […assetNames])

Wrap a component to load assets by names.
The following properties will be injected into the Component‘s props:

• assets<Object> - [name]: <Promise> hash look up
• assetsFulfilled<Boolean> - whether all the assets were loaded
• assetsRejected<Boolean> - whether one of the assets failed to load

get(name).then( => {})

Loads the asset, then returns the DOM element.
If you have a resolve() option, it will return the result of that instead.

You don’t really need to use this. Maybe if you want to “preload” assets.