rri

react-retina-image

React component for serving high-resolution images to devices with retina displays

Showing:

Popularity

Downloads/wk

731

GitHub Stars

108

Maintenance

Last Commit

4yrs ago

Contributors

6

Package

Dependencies

5

Size (min+gzip)

2.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-retina-image

React component for serving high-resolution images to devices with retina displays

Demo

http://kyleamathews.github.io/react-retina-image/

Install

npm install react-retina-image

Usage

Available props:

  • checkIfRetinaImgExists — test if retina image exists before swapping it in. If you're sure there's a retina image available, it's safe to set this to false. Defaults to true.
  • forceOriginalDimensions — sets width/height of retina image to original image. Note, this doesn't work if checkIfRetinaImgExists is set to false as then the original image is never loaded. In this case you'll need to set the width manually either as a prop or using css. Defaults to true.
  • retinaImageSuffix — defaults to @2x but you can change this if you use a different naming convention.
  • onLoad — handle the image onLoad event.
  • onError — handle the image onError event.
  • src — string or array for the image srcs. See the demo for examples of how to format your src string or array.
var React = require('react');
var RetinaImage = require('react-retina-image');

React.createClass({
  render: function () {
    <RetinaImage src="./images/balloon.jpg" checkIfRetinaImgExists=false />
  }
});

// Can also pass in array of srcs.
React.createClass({
  render: function () {
    <RetinaImage
       src={["./images/balloon.jpg", "./images/bigger-balloon.jpg"]} />
  }
});

Attribution

This component is largely a port of retina.js to React.js

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100