@jongleberry/react-asset-loader

React asset loader

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
90Feb 19, 2018Mar 10, 2017Minified + gzip package size for @jongleberry/react-asset-loader in KB

Readme

@jongleberry/react-asset-loader

NPM version Build status Test coverage Dependency Status License Downloads

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<String|Object>)

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(<DOMElement|?> => {})

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.