react-perfect-image
v0.0.4
Published
The perfect React image component.
Downloads
5
Maintainers
Readme
react-perfect-image
Renders an image that fills its container width and has the correct aspect ratio before the image source has loaded (no page reflow!). Also supports dynamic insertion of width and height values into src url so that you always fetch the correct image for the given screen size.
Demo
unsplash.now.sh
Install
npm install react-perfect-image --save
Props
Prop | Description
---------------------------|----------------
src
| Image src url
widthHeightRatio
| Ratio between width and height. A value of 2
or 2/1
would result in an image that's twice as wide as it is tall. We specify a ratio rather then an exact width and height because the image always fits its container while maintaining the correct aspect ratio.
parseSrc
| Set to true
if the supplied src
prop contains the string {width}
or {height}
and we'd like this string replaced with the value of parseSrcWidth
.
parseSrcWidth
| A width value that we'd like to insert into the src url. You'd detect the width in a parent component and pass it in via this prop.
parseSrcAllowedWidths
| An array of numeric width values. Rather then parse the url and insert the value of parseSrcWidth
it will find the closest value within this array and use that instead. You'd want to use this if you have a specific set of image sizes (rather then a dynamic CDN that can return an image of any desired width).
parseSrcDoubleForRetina
| Set to true
(default) if you'd like the parseSrcWidth
value to be doubled on retina devices.
children
| Elements or components that you'd like displayed directly after the <img>
tag. This is useful if you'd like to absolutely position something over the image.
Example
import React from 'react';
import Image from 'react-perfect-image';
const Photo = ({ data, parentWidth }) => {
const allowedSrcWidths = [ 200, 300, 400, 500 ];
return (
<a href={data.links.html}>
<Image
src={`https://source.unsplash.com/${data.id}/{width}x{height}`}
parseSrc={true}
parseSrcWidth={parentWidth}
parseSrcAllowedWidths={allowedSrcWidths}
parseSrcDoubleForRetina={true}
displaySrcWidth={true}
widthHeightRatio={1/1}
title={`A photo by ${data.user.name}`}/>
</a>
);
};