React Async Elements

Suspense-friendly async React elements for common situations.

npm i react-async-elements

Table of Contents

API
- <Img>
- <Script>
- <Video>
- <Audio>
- <IFrame>
- <Embed>
- <Style>
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;

Todo

<IFrame>
<Embed>
<Style>
Better error handling

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

MIT License