React Async Elements
Suspense-friendly async React elements for common situations.
npm i react-async-elements
Table of Contents
API
<Img>
props
src: string
- anything else you can pass to an
<img>
tag
;; { return <div> <h1>Hello</h1> <ReactPlaceholder delayMs=300 fallback='loading...'> <Img src="https://source.unsplash.com/random/4000x2000" /> </ReactPlaceholder> </div> ;} ;
<Script>
props
src: string
children?: () => React.ReactNode
- This render prop will only execute after the script has loaded.cache?
: Optionally pass your own instance ofsimple-cache-provider
- anything else you can pass to a
<script>
tag
;; { return <div> <h1>Load Stripejs Async</h1> <ReactPlaceholder delayMs=300 fallback='loading...'> <Script src="https://js.stripe.com/v3/" async> console || null </Script> </ReactPlaceholder> </div> ;} ;
<Video>
props
src: string
cache?
: Optionally pass your own instance ofsimple-cache-provider
- anything else you can pass to a
<video>
tag
;; { return <div> <h1>Ken Wheeler on a Scooter</h1> <ReactPlaceholder delayMs=300 fallback='loading...'> <Video src="https://video.twimg.com/ext_tw_video/1029780437437014016/pu/vid/360x640/QLNTqYaYtkx9AbeH.mp4?tag=5" preload="auto" autoPlay /> </ReactPlaceholder> </div> ;} ;
<Audio>
props
src: string
cache?
: Optionally pass your own instance ofsimple-cache-provider
- anything else you can pass to a
<audio>
tag
;; { return <div> <h1>Meavy Boy - Compassion</h1> /* source: http://freemusicarchive.org/music/Meavy_Boy/EP_71_to_20/Compassion */ <ReactPlaceholder delayMs=300 fallback='loading...'> <Audio src="https://file-dnzavydoqu.now.sh/" preload="auto" autoPlay /> </ReactPlaceholder> </div> ;} ;
<Preload>
Preload a resource with <link rel="preload">
.
More Info:
props
href: string
as: string
- resource type
;; { return <div> <h1>Preload</h1> <ReactPlaceholder delayMs=300 fallback='loading...'> <Preload href="https://js.stripe.com/v3/" rel="preload" as="script" /> <Script src="https://js.stripe.com/v3/" async /> </ReactPlaceholder> </div> ;} ;
<Stylesheet>
Lazy load a stylesheet.
props
href: string
;; { return <div> <h1>Styles</h1> <ReactPlaceholder delayMs=300 fallback='loading...'> <Stylesheet href="style.css" /> </ReactPlaceholder> </div> ;} ;
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
MIT License