JingYeoh / react-crossfade-image

react-crossfade-image - Simple React component for crossfading images - No CSS needed

react-crossfade-image

Simple component for crossfading images. Just pass it a new src prop and enjoy the fade!

Usage

npm install react-crossfade-image

Clone and run npm start for demo.

Sample component:

<CrossfadeImage src={imageSrc} />

Props

src

Image source as string - required

duration

Duration of the fade, in ms - default to 300

timingFunction

Support all CSS timing functions - default to 'ease'

delay

Duration of the delay before fading, in ms - default to 0

style

Custom styling for the image - default to { maxWidth: '100%', maxHeight: '100%' } for responsive image scaling

containerClass

Custom class string for the container element - default to 'CrossfadeImage'

License

MIT