# img-suspense

> React component for img suspense with fallback.

Latest version **0.0.2-beta-5** (published 2019-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install img-suspense
pnpm add img-suspense
yarn add img-suspense
bun add img-suspense
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2-beta-5 |
| Published | 2019-08-18 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @realdennis |
| Maintainers | realdennis |
| Keywords | react, suspense, image, img suspense, Fallback |

## Links

- npm: https://www.npmjs.com/package/img-suspense
- npm.io page: https://npm.io/package/img-suspense

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2-beta-5 (latest) — 2019-08-18
- 0.0.2-beta-4 — 2019-08-18
- 0.0.2-beta-3 — 2019-08-18
- 0.0.2-beta-2 — 2019-08-17
- 0.0.2-beta — 2019-08-17
- 0.0.2 — 2019-03-24
- 0.0.1 — 2019-03-23

## 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 `<img/>` 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';

<ImgSuspense
  src="./cutecat.jpg"
  alt="cat"
  style={{width:200px}}
  fallback={<p>Pending...</p>}
  />

```

## 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
<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.

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

### Use onError to catch
```jsx
<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

---
_Source: https://npm.io/package/img-suspense · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._