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

React component for serving high resolution images depends on display.
https://github.com/wonism/react-hd-image

hd high-density image img react react-component react-hd-image reactjs retina

Last synced: 5 months ago
JSON representation

React component for serving high resolution images depends on display.

• Host: GitHub
• URL: https://github.com/wonism/react-hd-image
• Owner: wonism
• License: mit
• Created: 2020-02-01T16:42:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T12:53:18.000Z (almost 3 years ago)
• Last Synced: 2025-04-18T11:19:49.288Z (6 months ago)
• Topics: hd, high-density, image, img, react, react-component, react-hd-image, reactjs, retina
• Language: TypeScript
• Homepage: https://wonism.github.io/react-hd-image
• Size: 7.06 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React HD Image

[![NPM](https://img.shields.io/npm/v/badge-size.svg?style=flat)](https://npmjs.org/package/react-hd-image)

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

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react-hd-image.svg)

![Test coverage for branches](https://github.com/wonism/react-hd-image/blob/master/coverage/badge-branches.svg)

![Test coverage for functions](https://github.com/wonism/react-hd-image/blob/master/coverage/badge-functions.svg)

![Test coverage for lines](https://github.com/wonism/react-hd-image/blob/master/coverage/badge-lines.svg)

![Test coverage for statements](https://github.com/wonism/react-hd-image/blob/master/coverage/badge-statements.svg)

React component for serving high resolution images depends on display.

## Installation

```sh

# npm

$ npm i react-hd-image -S

# yarn

$ yarn add react-hd-image -S

```

## Example

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

## Usage

__Properties__

| name      | type               |

|:----------|:-------------------|

| src       | string or string[] |

| skipCheck | boolean (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.

```tsx

```

__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.

```tsx

```

__Skip checking high resolution image existence__

It will always render normal image.

```tsx

```