https://github.com/openfresh/super-image

React component that render <img> with nicer interface
https://github.com/openfresh/super-image

image img object-fit react

Last synced: 6 months ago
JSON representation

React component that render <img> with nicer interface

• Host: GitHub
• URL: https://github.com/openfresh/super-image
• Owner: openfresh
• License: mit
• Created: 2017-08-03T03:17:43.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-06-03T08:51:30.000Z (about 6 years ago)
• Last Synced: 2025-09-30T22:32:18.575Z (9 months ago)
• Topics: image, img, object-fit, react
• Language: JavaScript
• Homepage: https://www.npmjs.com/super-image
• Size: 1.46 MB
• Stars: 37
• Watchers: 6
• Forks: 4
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SuperImage

[![Greenkeeper badge](https://badges.greenkeeper.io/openfresh/super-image.svg)](https://greenkeeper.io/)

[![Build Status](https://travis-ci.org/openfresh/super-image.svg?branch=master)](https://travis-ci.org/openfresh/super-image)

[![devDependency Status](https://david-dm.org/openfresh/super-image/dev-status.svg)](https://david-dm.org/openfresh/super-image?type=dev)

[![peerDependency Status](https://david-dm.org/openfresh/super-image/peer-status.svg)](https://david-dm.org/openfresh/super-image?type=peer)

[![codecov](https://codecov.io/gh/openfresh/super-image/branch/master/graph/badge.svg)](https://codecov.io/gh/openfresh/super-image)

> React component that render `` with nicer interface

## Install

```bash

$ npm install --save super-image

```

This package use `Object.assign()`, so you may need to polyfill via [`object.assign`](https://github.com/ljharb/object.assign).

## Usage

```jsx

```

### Use `` element

Set `sources` property.

```jsx

```

### Use `object-fit` fallback

Set `fitFallback` property `true`.

```jsx

```

## Config

| Property | Type | Description | Default value | Required |

|----------|------|-------------|---------------|----------|

| src | String | Image url | - | Yes |

| sources | Array | Sets of `` attributes: `srcSet`, `sizes`, `media` and `type` | `[]` | No |

| width | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image width | - | No |

| height | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image height | - | No |

| alt | String | Alternative text for `` | `""` | No |

| role | String | WAI-ARIA for `` | - | No |

| className | String | `className` property for component | `""` | No |

| flexible | Boolean | Make component fluid | `false` | No |

| fit | String | CSS `object-fit` property for `` (`contain` or `cover`) | - | No |

| fitFallback | Boolean | Force component to use `background-image` | `false` | No |

## License

MIT © [FRESH!](https://github.com/openfresh)