https://github.com/realdennis/img-suspense

A React.Suspense style lazy load img component! (What's new? You can use ErrorBoundary!)
https://github.com/realdennis/img-suspense

component fallback placeholder react suspense

Last synced: about 2 months ago
JSON representation

A React.Suspense style lazy load img component! (What's new? You can use ErrorBoundary!)

• Host: GitHub
• URL: https://github.com/realdennis/img-suspense
• Owner: realdennis
• License: mit
• Created: 2019-03-23T23:23:10.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T18:55:39.000Z (over 3 years ago)
• Last Synced: 2025-10-09T06:33:08.254Z (8 months ago)
• Topics: component, fallback, placeholder, react, suspense
• Language: TypeScript
• Homepage:
• Size: 1.55 MB
• Stars: 1
• Watchers: 0
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# img-suspense

[![Build Status](https://travis-ci.org/realdennis/img-suspense.svg?branch=master)](https://travis-ci.org/realdennis/img-suspense)

[![Coverage Status](https://coveralls.io/repos/github/realdennis/img-suspense/badge.svg?branch=master)](https://coveralls.io/github/realdennis/img-suspense?branch=master)

![Gif Demo](https://media.giphy.com/media/3ZYutsrBnh8DmoLN27/giphy.gif)

[Demo](https://codesandbox.io/s/k3jx7l96po)

A React img component like **React.Suspense**!

Actually, its all props are same as `` like `src` `alt`...

**You should pass a react element to `fallback` prop.**

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

## Intallation

```sh

$ yarn add img-suspense

```

## Usage

```jsx

import ImgSuspense from 'img-suspense';

Pending...}

  />

```

## Handle Exception

![Gif Demo](https://media.giphy.com/media/8F3dZPrSBmOC5OILum/giphy.gif)

**Error Boundary** vs **onError**

There's an [example](https://codesandbox.io/s/3812yrjzz5) show how to handle exception.

### Error Boundary

```jsx

  Pending...}

  />

```

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.

- https://reactjs.org/docs/code-splitting.html#error-boundaries

- https://reactjs.org/docs/error-boundaries.html

### Use onError to catch

```jsx

 console.log('Error occurs! Override ImgSuspense exception')}

  src="./path/picuture.jpg"

  alt="picture"

  fallback={
Pending...
}

/>

```


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

---

LICENSE MIT © 2019 realdennis