img-suspense
TypeScript icon, indicating that this package has built-in type declarations

0.0.2-beta-5 • Public • Published

img-suspense

Build Status Coverage Status

Gif Demo

Demo

A React img component like React.Suspense!

Actually, its all props are same as <img/> like src alt...

You should pass a react element to fallback prop.

When image are still pending, it'll show fallback element.

Intallation

$ yarn add img-suspense

Usage

import ImgSuspense from 'img-suspense';
 
<ImgSuspense
  src="./cutecat.jpg"
  alt="cat"
  style={{width:200px}}
  fallback={<p>Pending...</p>}
  />
 

Handle Exception

Gif Demo

Error Boundary vs onError

There's an example show how to handle exception.

Error Boundary

<ErrorBoundary>
  <ImgSuspense src="./path/picuture.jpg" fallback={<p>Pending...</p>} />
</ErrorBoundary>

If the img fails to load (for example, due to network failure), it will trigger an error.

You can handle these errors to show a nice user experience and manage recovery with Error Boundaries.

That's a same way you handle React.suspense exception.

Use onError to catch

<ImgSuspense
  onError={e => console.log('Error occurs! Override ImgSuspense exception')}
  src="./path/picuture.jpg"
  fallback={<p>Pending...</p>}
/>

You can just override onError handler to prevent component exception, treat it like an img element!


LICENSE MIT © 2019 realdennis

Package Sidebar

Install

npm i img-suspense

Weekly Downloads

2

Version

0.0.2-beta-5

License

MIT

Unpacked Size

9.25 kB

Total Files

12

Last publish

Collaborators

  • realdennis