NPM Build Status npm bundle size (minified) Test coverage for branches Test coverage for functions Test coverage for lines Test coverage for statements

React component for serving high resolution images depends on display.

# npm
$ npm i react-hd-image -S
# yarn
$ yarn add react-hd-image -S

https://wonism.github.io/react-hd-image

Properties

Choose right resolution image depends on display type

If you are on the HD display and there is a ./ironman@3x.jpg, 3x image will be rendered automatically.

<HDImage
 src="./ironman.jpg"
 alt="Iron Man"
/>

Pass an array of several resolution images

If high resolution image's name is not predictable, It is possible to pass an set of image names.

<HDImage
 src={[
 './winterscape.jpg',
 './winterscape-retina-version.jpg',
 './winterscape-hd-version.jpg',
 ]}
 alt="House"
/>

Skip checking high resolution image existence

It will always render normal image.

<HDImage
 src="./ironman.jpg"
 alt="Iron Man"
 skipCheck
/>