# react-responsive-img

> Preserves aspect ratio space while loading in an image. Can be used with srcset and alt tags. Also can optionally show a loading animation.

Latest version **3.0.0** (published 2017-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-responsive-img
pnpm add react-responsive-img
yarn add react-responsive-img
bun add react-responsive-img
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-12-01 |
| First published | 2017-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kennedy Rose |
| Maintainers | ken85rose |

## Links

- npm: https://www.npmjs.com/package/react-responsive-img
- Repository: https://github.com/escaladesports/react-img
- Homepage: https://github.com/escaladesports/react-img#readme
- Issues: https://github.com/escaladesports/react-img/issues
- npm.io page: https://npm.io/package/react-responsive-img

## Recent versions

- 3.0.0 (latest) — 2017-12-01
- 2.0.9 — 2017-11-21
- 2.0.7 — 2017-11-21
- 2.0.6 — 2017-11-21
- 2.0.5 — 2017-11-21
- 2.0.4 — 2017-11-21
- 2.0.2 — 2017-11-21
- 2.0.1 — 2017-11-20
- 2.0.0 — 2017-11-20
- 1.0.3 — 2017-11-20
- 1.0.2 — 2017-11-20
- 1.0.1 — 2017-11-20

## README

# React Responsive Image

Preserves aspect ratio space while loading in an image. Can be used with srcset and alt tags. Also can optionally show a loading animation.

Note: To preserve image space, the image will be styled as a block element.

## Installation

With Yarn:

```bash
yarn add react-responsive-img
```

Or with npm:

```bash
npm install --save react-responsive-img
```

## Usage

Basic usage:

```javascript
import Img from 'react-responsive-img'

const imageComponent = () => {
	<Img
		src='http://via.placeholder.com/500x1000'
		width={500}
		height={1000}
		alt={this.state.product.title}
		/>
}
```

With loading animation:

```javascript
import Img from 'react-responsive-img'
import LoadingAnimation from 'loading-animation'

const imageComponent = () => {
	<Img
		src='http://via.placeholder.com/500x1000'
		width={500}
		height={1000}
		loading={<LoadingAnimation />}
		/>
}
```

With srcset:

```javascript
import Img from 'react-responsive-img'
import LoadingAnimation from 'loading-animation'

const imageComponent = () => {
	<Img
		srcSet={`
			http://via.placeholder.com/125x250 125w,
			http://via.placeholder.com/250x500 250w,
		`}
		src='http://via.placeholder.com/500x1000'
		width={500}
		height={1000}
		/>
}
```

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