# react-progress-image

> react-progress-image is an `` tag replacement for react supporting displaying a loading spinner or bar in case the large image takes a lot of time to load. This library supports displaying custom loading bar or spinners.

Latest version **0.1.1** (published 2021-11-10) · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-11-10 |
| First published | 2021-11-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | faarsal |
| Maintainers | faarsal |
| Keywords | react, components, ui |

## Links

- npm: https://www.npmjs.com/package/react-progress-image
- npm.io page: https://npm.io/package/react-progress-image

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.7
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.15.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2021-11-10
- 0.1.0 — 2021-11-10

## README

# React Progress Image

react-progress-image is an `<img>` tag replacement for react supporting displaying a loading spinner or bar in case the large image takes a lot of time to load. This library supports displaying custom loading bar or spinners.

## Getting Started

To install this library use the npm install command:

    npm install react-progress-image --save

Later import the ImageLoader component from it

    import {ImageLoader} from "react-progress-image";

## Dependencies

`react-progress-image ` has no external dependencies, aside for a version of react and react-dom which support hooks and @babel/runtime.

## Documentation

ImageLoader

|      Props       |                                                          Documentation                                                          |
| :--------------: | :-----------------------------------------------------------------------------------------------------------------------------: |
| onProgressUpdate |         Callback for the event when image loading progress is change. This provides the percentage of image downloaded          |
|      onDone      |                                     Callback for the event when image download is completed                                     |
|   hideLoading    | Boolean: to hide the default loading display of the component. This should to be true when custom loader is used. Default:false |

Example Usage:

This is the example of using custom loader.
Replace the `<h1>` with your custom loader component

    import React,{useState} from "react"
    import {ImageLoader} from "react-progress-image";

    const  ImageComponent=()=> {
      const url="test-url";
      const [state,setState]=useState({LoadingPercent:0})
      return (
        <div>
        {state.LoadingPercent<100 &&
        <h1>{`Loading ${state.LoadingPercent}%`} </h1>}
         <ImageLoader src={url} hideLoading onProgressUpdate={(progress)=>{
           setState({...state,LoadingPercent:progress})
         }}/>
        </div>
      );
    }

    export default ImageComponent;

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