# simple-react-image

> Simple React Image is tag of react to gracefully manage large and broken images

Latest version **1.0.13** (published 2023-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-react-image
pnpm add simple-react-image
yarn add simple-react-image
bun add simple-react-image
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2023-03-21 |
| First published | 2022-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Muhammad Umar |
| Maintainers | umar_js |
| Keywords | simple-react-image, react-image, react, typescript, img, loader, fallback, react image, image on error, error image, react image loader, react image fallback, image, react error image, react-error-image |

## Links

- npm: https://www.npmjs.com/package/simple-react-image
- Repository: https://github.com/MuhammadUmar01/simple-react-image
- Homepage: https://github.com/MuhammadUmar01/simple-react-image#readme
- Issues: https://github.com/MuhammadUmar01/simple-react-image/issues
- npm.io page: https://npm.io/package/simple-react-image

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

- 1.0.13 (latest) — 2023-03-21
- 1.0.12 — 2023-03-21
- 1.0.11 — 2023-03-15
- 1.0.10 — 2022-11-23
- 1.0.9 — 2022-08-19
- 1.0.8 — 2022-08-19
- 1.0.7 — 2022-08-19
- 1.0.6 — 2022-08-19
- 1.0.5 — 2022-05-19
- 1.0.4 — 2022-05-16
- 1.0.3 — 2022-05-16
- 1.0.2 — 2022-05-16
- 1.0.1 — 2022-05-16
- 1.0.0 — 2022-05-16

## README

`simple-react-image` is a React component of `<img>` tag, to gracefully loading large images. Additionally it accepts two optional props, fallback and errorImage. Fallback will be displayed when image will be loading and errorImage will be displyed on any error happend while loading image

![demo image](https://raw.githubusercontent.com/MuhammadUmar01/simple-react-image/main/src/static/simple_react_image.gif)

## Install

```bash
npm install --save simple-react-image
```

or,

```bash
yarn add simple-react-image
```

| Prop            | type     | desciption                     | required |
| --------------- | -------- | ------------------------------ | -------- |
| `fallback`      | string   | loading image                  | `no`     |
| `errorImage`    | string   | image on error                 | `no`     |
| `onStateChange` | function | called on loading state change | `no`     |

`all img tags props`

## Usage

```jsx
import { Image as Img } from 'simple-react-image';

  <Img
    src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
    />

  <Img
    src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
    fallback="loading image url"
    errorImage='image displyed on error'
    onStateChange={(state)=>{
      console.log(state)
    }}
    />

```

## Demo

[Check Demo here](https://codesandbox.io/s/jolly-goodall-isx64t)

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