# react-prefetch-image

> Help to manage prefetching image

Latest version **0.1.0** (published 2017-11-08) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-11-08 |
| First published | 2017-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | swat |
| Maintainers | puresmash |
| Keywords | react, image, prefetch |

## Links

- npm: https://www.npmjs.com/package/react-prefetch-image
- Repository: https://github.com/puresmash/react-prefetch-image
- Homepage: https://puresmash.github.io/react-prefetch-image/
- Issues: https://github.com/puresmash/react-prefetch-image/issues
- npm.io page: https://npm.io/package/react-prefetch-image

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0

## 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.1.0 (latest) — 2017-11-08
- 0.1.0-beta (beta) — 2017-11-06
- 0.1.0-alpha (alpha) — 2017-11-05

## README

# react-prefetch-image

 This library is similar to libs which helping you lazy load your images. It aims to provide a flexible prefetch mechanism, make the image loading flow smoother when having lots of images but only serval of them should display at the same time (like slides or album display component).

## Illustrate

![Illustrate by timeline](/public/figure1.png)

> Result of prefetchNext=2, activeRange=[0, 0]

## Install

```sh
$ npm install --save react-prefetch-image
```

## Usage

```jsx
import { ImageManager } from 'react-prefetch-image';

// ...

<ImageManager prefetchNext={1}
  activeIndex={currnetIndex}
  activeRange={[-1, 1]}
  items={imgSrcArray}>
  {meta.map(({ src, prefetch, isActive }, i) =>
    <div id="img-wrapper" key={`img-${i}`}>
      {prefetch}
      <img src={src} className={isActive? 'active' : 'normal'} />
    </div>
  )}
</ImageManager>

```

## Props

### prefetchNext

How many following images the lib will prefetch for you. If so, it will return a prefetch component to you. (Notice that we didn't use xhr prefetch at this time, instead, we returning a prefetch link)

### activeIndex

Current index in the items array. you should iterate this value in most cases.

### activeRange

The range beside current index will count as active. If an index is active, the lib will inject an isActive flag to your render function.

### items

The image URLs it will manage.

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