# react-aspect-ratio-img

> Set Custom Aspect Ratio Image to the Wrap Element(fence)

Latest version **2.1.1** (published 2021-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-aspect-ratio-img
pnpm add react-aspect-ratio-img
yarn add react-aspect-ratio-img
bun add react-aspect-ratio-img
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-02-21 |
| First published | 2019-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | danhuang |
| Maintainers | danhuang1202 |
| Keywords | react, aspect ratio image, square image |

## Links

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

## Dependencies (1)

- [react-aspect-ratio-fence](https://npm.io/package/react-aspect-ratio-fence.md) ^1.8.5

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

- 2.1.1 (latest) — 2021-02-21
- 2.1.0 — 2019-11-14
- 2.0.3 — 2019-10-13
- 2.0.2 — 2019-10-13
- 2.0.1 — 2019-09-11
- 2.0.0 — 2019-08-20
- 1.1.2 — 2019-07-28
- 1.1.1 — 2019-07-28
- 1.1.0 — 2019-07-27
- 1.0.0 — 2019-07-26

## README

# react-aspect-ratio-img
[![Build Status](https://travis-ci.org/danhuang1202/react-aspect-ratio-img.svg?branch=master)](https://travis-ci.org/danhuang1202/react-aspect-ratio-img) 
[![codecov](https://codecov.io/gh/danhuang1202/react-aspect-ratio-img/branch/master/graph/badge.svg)](https://codecov.io/gh/danhuang1202/react-aspect-ratio-img)
[![NPM version](https://img.shields.io/npm/v/react-aspect-ratio-img.svg)](https://www.npmjs.com/package/react-aspect-ratio-img)

Render HTML img tag with specific aspect ratio with React.
for more information, please see: <a href="https://danhuang1202.github.io/react-aspect-ratio-img/">Document</a>


## Installation
```
npm i react-aspect-ratio-img
```

## Components
- AspectRatioImg (`no IE support`)

  Use [AspectRatioFence](https://www.npmjs.com/package/react-aspect-ratio-fence) as wrap element to set the aspect ratio and pass `<img />` element as `children` props into it.

  | props | type | required | default | description |
  | --- | --- | --- | --- | --- |
  | outerElementType | string | false | div | html tag name of the wrap component |
  | ratio	| number | true |	1	| The aspect ratio of an image describes the proportional relationship between width and height |
  | className	| string |	false | - | Custom class name of the wrap component |
  | src	| string |	true | - | The URL of an image |
  | imgAttributes | object | false | - | The [attributes](https://www.w3schools.com/tags/tag_img.asp) of `<img />` tag |
  | children | ReactNode | false | - | Custom children node which as silbing of `<img />` tag |

- AspectRatioImgLegacy

  Use [AspectRatioFenceLegacy](https://www.npmjs.com/package/react-aspect-ratio-fence) as wrap element to set the aspect ratio and pass `<img />` element as `children` props into it.

  | props | type | required | default | description |
  | --- | --- | --- | --- | --- |
  | outerElementType | string | false | div | html tag name of the outer component |
  | innerElementType | string | false | div | html tag name of the inner component |
  | ratio	| number | true |	1	| The aspect ratio of an image describes the proportional relationship between width and height |
  | className	| string |	false | - | Custom class name of the wrap component |
  | src	| string |	true | - | The URL of an image |
  | imgAttributes | object | false | - | The [attributes](https://www.w3schools.com/tags/tag_img.asp) of `<img />` tag |
  | children | ReactNode | false | - | Custom children node which as silbing of `<img />` tag |

- SquareImg

  Use [SquareFence](https://www.npmjs.com/package/react-aspect-ratio-fence) as wrap element and pass `<img />` element as `children` props into it.

  | props | type | required | default | description |
  | --- | --- | --- | --- | --- |
  | outerElementType | string | false | div | html tag name of the wrap component |
  | className	| boolean |	false | - | Custom class name of the wrap component |
  | src	| string |	true | - | The URL of an image |
  | imgAttributes | object | false | - | The [attributes](https://www.w3schools.com/tags/tag_img.asp) of `<img />` tag |
  | children | ReactNode | false | - | Custom children node which as silbing of `<img />` tag |

## Way to Ride
- Common jS
```js
// import from package entry point
const uc = require('react-aspect-ratio-img')
require('react-aspect-ratio-img/css/style.css')

  <uc.AspectRatioImg {...props} />
  <uc.SquareImg {...props} />
```
```js
// only import specific component
const AspectRatioImg = require('react-aspect-ratio-img/lib/components/AspectRatioImg')
require('react-aspect-ratio-img/css/components/AspectRatioImg/style.css')

  <AspectRatioImg {...props} />
```

- ESM
```js
// import from package entry point
import { AspectRatioImg, SquareImg } from 'react-aspect-ratio-img'
import 'react-aspect-ratio-img/css/style.css'

  <AspectRatioImg {...props} />
  <SquareImg {...props} />
```
```js
// only import specific component
import AspectRatioImg from 'react-aspect-ratio-img/es/components/AspectRatioImg'
import 'react-aspect-ratio-img/css/components/AspectRatio/style.css'

  <AspectRatioImg {...props} />
```

## Development by storybook
```
npm install
npm start storybook
```
- configuration files list in `.storybook` directory
- story files list in `.stories` directory


## Test with Jest and Puppeteer
```
npm run test
```
- `__tests__`
  - unit test running by `jest`
  - use `test:update` to update jest `snapshot`

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