https://github.com/wonism/react-retina-renderer
https://github.com/wonism/react-retina-renderer
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wonism/react-retina-renderer
- Owner: wonism
- License: mit
- Created: 2018-08-09T07:53:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-13T06:33:11.000Z (over 6 years ago)
- Last Synced: 2025-02-15T20:53:08.117Z (2 months ago)
- Language: JavaScript
- Size: 74.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Retina Renderer
> React component for rendering retina images.
> This component was created with reference to
> [react-retina-image](https://github.com/KyleAMathews/react-retina-image)
## Installation
```
$ npm i -S react-retina-renderer
```
## Demo
```
$ npm run dev
# and visit localhost:7777
```
## Usage
```js
import Image from 'react-retina-renderer';
/* ... */
/* ... */
```
## Properties
| property | type | required | remark |
|:------------------------|:---------------------------|:--------:|:-------|
| src | array of strings or string | o | If you want to render retina image on retina display, pass the array |
| alt | string | x | Alternate text for an image |
| width | number | x | Image's width. If it is omitted, img will use `auto` or `naturalWidth` |
| height | number | x | Image's height. If it is omitted, img will use `auto` or `naturalHeight` |
| forceOriginalDimensions | bool | x | If it is true, It will pass width and height as a real value to `![]()
` |
| onLoad | function | x | Callback function which is triggered when image is loaded |
| onError | function | x | Callback function which is triggered when image is failed to load |