react-suspense-img
v0.2.0
Published
A simple React image component that suspends while loading
Downloads
352
Readme
️⚠️ Please note this package relies on experimental React features that are not yet available in a stable release. By definition, this means this package is also experimental. See the React documentation on current mode for more details.
🖼 react-suspense-img
A simple React image component that suspends while loading.
Usage
Import the Img
component and image resource
cache.
import { Img, resource } from 'react-suspense-img';
Use the Img
component as you would a standard img
element. However, ensure to wrap it (at the desired place in the tree) with a ErrorBoundary
and React.Suspense
. The Img
component will suspend (while loading) or throw an error (if an error occurred loading the image).
// Start fetching early, following the render-as-you-fetch pattern.
resource.preloadImage('https://placekitten.com/12/34');
const Component = () => (
<ErrorBoundary>
<React.Suspense fallback="Loading...">
<Img src="https://placekitten.com/12/34" width={64} alt="Kitten" />
</React.Suspense>
</ErrorBoundary>
);
Credit
- Built with TSDX.
- Inspired by
relay-experimental
. - Inspired by
suspense-experimental-github-demo
.