React Async Elements

Suspense-friendly async React elements for common situations.

npm i react-async-elements

Table of Contents

• API
  • <Img>
  • <Script>
  • <Video>
  • <Audio>
  • <Preload>
  • <Stylesheet>
  • <IFrame>
  • <Embed>
• Todo
• Playing with Suspense
• Authors

API

<Img>

props

• src: string
• anything else you can pass to an <img> tag

import React from 'react';
import { Img } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Img src="https://source.unsplash.com/random/4000x2000" />
      </React.Placeholder>
    </div>
  );
}

export default App;

<Script>

props

• src: string
• children?: () => React.ReactNode - This render prop will only execute after the script has loaded.
• cache?: Optionally pass your own instance of simple-cache-provider
• anything else you can pass to a <script> tag

import React from 'react';
import { Script } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Load Stripe.js Async</h1>
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Script src="https://js.stripe.com/v3/" async>
          {() => console.log(window.Stripe) || null}
        </Script>
      </React.Placeholder>
    </div>
  );
}

export default App;

<Video>

props

• src: string
• cache?: Optionally pass your own instance of simple-cache-provider
• anything else you can pass to a <video> tag

import React from 'react';
import { Video } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Ken Wheeler on a Scooter</h1>
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Video
          src="https://video.twimg.com/ext_tw_video/1029780437437014016/pu/vid/360x640/QLNTqYaYtkx9AbeH.mp4?tag=5"
          preload="auto"
          autoPlay
        />
      </React.Placeholder>
    </div>
  );
}

export default App;

<Audio>

props

• src: string
• cache?: Optionally pass your own instance of simple-cache-provider
• anything else you can pass to a <audio> tag

import React from 'react';
import { Audio } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Meavy Boy - Compassion</h1>
      {/* source: http://freemusicarchive.org/music/Meavy_Boy/EP_71_to_20/Compassion */}
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Audio src="https://file-dnzavydoqu.now.sh/" preload="auto" autoPlay />
      </React.Placeholder>
    </div>
  );
}

export default App;

<Preload>

Preload a resource with <link rel="preload">.

More Info:

• MDN
• Google Developer Blog

props

• href: string
• as: string - resource type

import React from 'react';
import { Preload, Script } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Preload</h1>
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Preload href="https://js.stripe.com/v3/" rel="preload" as="script" />
        <Script src="https://js.stripe.com/v3/" async />
      </React.Placeholder>
    </div>
  );
}

export default App;

<Stylesheet>

Lazy load a stylesheet.

props

• href: string

import React from 'react';
import { Stylesheet } from 'react-async-elements';

function App() {
  return (
    <div>
      <h1>Styles</h1>
      <React.Placeholder delayMs={300} fallback={'loading...'}>
        <Stylesheet href="style.css" />
      </React.Placeholder>
    </div>
  );
}

export default App;

Todo

• [ ] <IFrame>
• [ ] <Embed>

Playing with Suspense

If you want to play around with suspense features, you'll need to enable suspense somehow. That means either building React yourself. Or, using this handy dandy starter we made.

https://github.com/palmerhq/react-suspense-starter

Authors

• Jack Cross
• Jared Palmer

MIT License