# react-fitted-image

> React component for image handling with object-fit

Latest version **1.0.1** (published 2019-06-06) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-06-06 |
| First published | 2016-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | alexjoffroy |
| Maintainers | alexjoffroy |
| Keywords | react, image, picture, load, object-fit, img, react-component |

## Links

- npm: https://www.npmjs.com/package/react-fitted-image
- Repository: https://github.com/alexjoffroy/react-fitted-image
- Issues: https://github.com/alexjoffroy/react-fitted-image/issues
- npm.io page: https://npm.io/package/react-fitted-image

## 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

- 1.0.1 (latest) — 2019-06-06
- 1.0.0 — 2019-05-29
- 0.1.4 — 2019-02-15
- 0.1.3 — 2017-10-25
- 0.1.2 — 2017-03-25
- 0.1.1 — 2016-03-25

## README

<a href="https://www.npmjs.com/package/react-fitted-image"><img src="https://img.shields.io/npm/dt/react-fitted-image.svg" alt="Total Downloads"></a>
<a href="https://github.com/alexjoffroy/react-fitted-image/releases"><img src="https://img.shields.io/npm/v/react-fitted-image.svg" alt="Latest Release"></a>
<a href="https://github.com/alexjoffroy/react-fitted-image/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/react-fitted-image.svg" alt="License"></a>

# react-fitted-image

Pictures are always difficult to handle in web page, especially in a responsive way. A well-known workaround is to style the img tag with something like this:

```css
img {
  max-width: 100%;
  height: auto;
}
```

This method works well, but there is a lot of cases where it's not sufficient. Fortunately CSS introduced some times ago the ["object-fit" property](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit), improving the way we can handle image displaying.
The current component provides an easy react binding to display images with object-fit property.

In addition, you can provide a loader which will be displayed during the image processing by the browser.

Object-fit is well supported by browsers but not all of them for now ( see [Caniuse](http://caniuse.com/#feat=object-fit) ). To work on stuffs like IE, a basic test is done with [CSS.supports](https://developer.mozilla.org/en/docs/Web/API/CSS/supports) to provide a fallback based on "background" CSS property.

## Demo

http://alexjoffroy.github.io/react-fitted-image/example/

## Usage

### Install

```
npm install --save react-fitted-image
```

### Properties

| Property   | Type     | Description                                                            | Default value | Required |
| ---------- | -------- | ---------------------------------------------------------------------- | ------------- | -------- |
| background | bool     | Force the component to use the CSS bacground properties                | false         | no       |
| className  | string   | Custom classname for the component                                     | \_            | no       |
| fit        | string   | Value of the object-fit property. Can be "auto", "contain", or "cover" | "auto"        | no       |
| loader     | element  | Component to use as loader                                             | \_            | no       |
| onLoad     | function | Success callback for image loading                                     | \_            | no       |
| onError    | function | Error callback for image loading                                       | \_            | no       |
| src        | string   | Image url to render                                                    | \_            | yes      |
| style      | object   | Custom styles                                                          | {}            | no       |

### Example

```javascript
<FittedImage
  fit="contain"
  loader={<div>Loading</div>}
  onLoad={(...args) => console.log(...args)}
  onError={(...args) => console.log(...args)}
  src="public/img.jpg"
/>
```

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