# react-use-image

> A react hook for pre-loading images.

Latest version **0.2.3** (published 2020-08-03) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2020-08-03 |
| First published | 2020-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Joe Seifi |
| Maintainers | joeshub |

## Links

- npm: https://www.npmjs.com/package/react-use-image
- Repository: https://github.com/joeshub/react-use-image
- Homepage: http://seifi.org/
- Issues: https://github.com/joeshub/react-use-image/issues
- npm.io page: https://npm.io/package/react-use-image

## Recent versions

- 0.2.3 (latest) — 2020-08-03
- 0.2.2 — 2020-07-22
- 0.2.1 — 2020-06-21
- 0.2.0 — 2020-06-21

## README

# react-use-image

A react hook for pre-loading images.

## install it

```bash
npm i react-use-image

# or

yarn add react-use-image
```

## use it

```jsx
import useImage from 'react-use-image';

const Example = ({ src }) => {
  // use the hook
  // pass it an image source url
  const { loaded } = useImage(src);

  if (!loaded) return null;

  return <img src={src} alt="Example" />;
};
```

## input

Image URL, e.g. <https://foo.com/cat.jpg>

## return values

```js
{
  "loaded": false, // image found and loaded
  "failed": false, // image not found

  // actual size of the image
  "dimensions": {
    "width": 0, // width of image in pixels
    "height": 0 // height of image in pixels
  }
}
```

## Docs

- Storybook coming soon

## Authoer

Joe Seifi

## Licence

MIT

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