# @kunalukey/react-image

> Lightweight react component to lazy load images.

Latest version **1.0.7** (published 2022-11-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @kunalukey/react-image
pnpm add @kunalukey/react-image
yarn add @kunalukey/react-image
bun add @kunalukey/react-image
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-11-21 |
| First published | 2022-11-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Kunal Ukey |
| Maintainers | kunalukey |
| Keywords | react-image, reactlazy, react-component, lazyload, lazyloading, lazy-loading, lazyload-images |

## Links

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

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2022-11-21
- 1.0.6 — 2022-11-21
- 1.0.5 — 2022-11-20
- 1.0.4 — 2022-11-18
- 1.0.3 — 2022-11-18
- 1.0.2 — 2022-11-18
- 1.0.1 — 2022-11-18
- 1.0.0 — 2022-11-18

## README

# React-Image 🖼

Lightweight React Component To Lazy Load Images.

[![bundle size](https://img.shields.io/bundlephobia/minzip/@kunalukey/react-image?style=for-the-badge)](https://bundlephobia.com/package/@kunalukey/react-image)
[![license](https://img.shields.io/github/license/helloukey/react-image?style=for-the-badge)](LICENSE)
[![npm release](https://img.shields.io/npm/v/@kunalukey/react-image?color=orange&style=for-the-badge)](https://www.npmjs.com/package/@kunalukey/react-image)
[![zero dependency](https://img.shields.io/badge/dependencies-0-success?style=for-the-badge)](package.json)

## Features

- Super Lightweight (Less than **1KB**) 🔥 
- Easy Setup ⚙
- Easy Customization ⛏
- Zero Dependencies! 🤯

## Installation

Install **React-Image** with npm

```bash
  npm install @kunalukey/react-image
```

## Usage/Examples

- React 16.8.0 and higher is required.
- You should have a placeholder image saved locally in your project. You can create one and download it from **[HERE](https://placeholderimage.dev/)**

```javascript
import { LazyImage } from "@kunalukey/react-image";
import placeholderImage from "../assets/placeholder.png";

const MyComponent = () => {

  return (
    <div>
          <LazyImage
            placeholderSrc={placeholderImage}
            placeholderStyle={{ width: "100%" }}
            placeholderClassName="placeholderClassName"
            src="https://source.unsplash.com/random/1920x1080"
            alt="my-image"
            className="imageClassName"
            style={{ width: "100%" }}
          />
    </div>
  );
};

export default MyComponent;
```

## Props

| Props                | Required | Description                                                 |
|----------------------|----------|-------------------------------------------------------------|
| placeholderSrc       | **true** | Placeholder image src (locally saved image is recommended). |
| placeholderClassName | -        | className for placeholder image.                            |
| placeholderStyle     | -        | style for placeholder image.                                |
| src                  | **true** | src for an actual image.                                    |
| alt                  | -        | alt tag for an actual image.                                |
| className            | -        | className for an actual image.                              |
| style                | -        | style for an actual image.                                  |

## License

[![license](https://img.shields.io/github/license/helloukey/react-image?style=for-the-badge)](LICENSE)

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