# amp-react-square-img

> :zap:An amp-react component rendering image in square shape on AMP page.:zap:

Latest version **0.0.6** (published 2018-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install amp-react-square-img
pnpm add amp-react-square-img
yarn add amp-react-square-img
bun add amp-react-square-img
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2018-05-10 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 182 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | CR Jimmy |
| Maintainers | jimmy319 |

## Links

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

## Recent versions

- 0.0.6 (latest) — 2018-05-10
- 0.0.5 — 2018-05-09
- 0.0.4 — 2018-05-09
- 0.0.3 — 2018-05-09
- 0.0.2 — 2018-05-09
- 0.0.1 — 2018-05-09

## README

[![Build Status](https://travis-ci.org/jimmy319/amp-react-square-img.svg?branch=master)](https://travis-ci.org/jimmy319/amp-react-square-img)
[![codecov](https://codecov.io/gh/jimmy319/amp-react-square-img/branch/master/graph/badge.svg)](https://codecov.io/gh/jimmy319/amp-react-square-img)

# amp-react-square-img:zap:
An amp-react component rendering image in square shape on AMP page. It will help you maintain the correct aspect ratio of image according to the resizing strategy(cover, contain ... etc) you specified.

## Why need this?
`background-size` is the common solution we usually adopt to render a square image with correct aspect ratio. It means that you need to set the image source via background-image and inline style is required if image source is not static. Inline style will break an AMP page so we need to use another solution to achieve this.

## Props

| name | type | description |
|------|------|------------------|
| src | string | the url of image |
| srcset | string | same as srcset attribute on the img tag |
| sizes | string | same as sizes attribute on the img tag |
| alt | string | same as alt attribute on the img tag |
| attribution | string | a string that indicates the attribution of the image |
| fallbackImg | string | the source url of fallback image |
| resizingStrategy | string | all the valid values of css property `object-fit` can be used here |

## Example

```javascript
import SquareImage, { statics } from 'amp-react-square-img'
import 'amp-react-square-img/dist/css/component.css'

<SquareImage src='https://s.yimg.cc/irq/test.jpg' resizingStrategy={statics.CONTAIN_RESIZING} />
```

## License
[MIT](https://github.com/jimmy319/amp-react-square-img/blob/master/LICENSE)

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