Wondering what’s next for npm?Check out our public roadmap! »

    react-retina-image

    2.0.5 • Public • Published

    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

    Install

    npm i react-retina-image

    DownloadsWeekly Downloads

    1,914

    Version

    2.0.5

    License

    MIT

    Last publish

    Collaborators

    • avatar