react-image-fade-in

Simple, no frills, component for fading in images. Just pass it a src prop.

Install

npm install --save react-image-fade-in

DEMO

Usage

import React, { Component } from "react";
 
import ImageFadeIn from "react-image-fade-in";
 
class Example extends Component {
  render() {
    return <ImageFadeIn width={640} height={480} src={imageSrc} />;
  }
}

Props

This a list of props that you can pass down to the component:

Property	Description	Default value	Type	Required
src	image source url		string	yes
loadAsBackgroundImage	if false, renders as an IMG tag. If true, renders a DIV with image as the background-image (style css)	false	bool
opacityTransition	Duration of the fade in, in seconds (s)	0.5s	number
onClick	onClick handler		function
HTML Global Attributes	add your own attributes (style, className, id, etc.)
HTML Event Attributes	add your own events (onBlur, onFocus, onMouseDown, etc.)

License

MIT © patricktran