1.0.1 • Published 4 years ago

react-hd-image v1.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

React HD Image

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.

Installation

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

Usage

Properties

nametype
srcstring or string[]
skipCheckboolean (optional)

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