Simple React component for crossfading images. 

Simple React component for crossfading images

khanglu

react-crossfade-image

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

import React, { Component } from "react";

var CrossfadeImage = function (_Component) {

    _classCallCheck(this, CrossfadeImage);

    var _this = _possibleConstructorReturn(this, (CrossfadeImage.__proto__ || Object.getPrototypeOf(CrossfadeImage)).call(this, props));

    value: function componentWillReceiveProps(newProps) {

        // Reset the component everytime we receive new prop, to

        // cancel out any animation that's still going on

        this.setState({ bottomSrc: false, topSrc: false }, function () {

          // Opacity less than 1 takes precendence in stacking order

          { bottomSrc: oldSrc, topSrc: newSrc, bottomOpacity: 0.99 }, function () {

            // One of the few times setTimeout does wonders, this is for

            // getting fade out transition without css keyframe

            if (!_this2.timeout) clearTimeout(_this2.timeout);

            _this2.timeout = setTimeout(function () {

              return _this2.setState({ bottomOpacity: 0 });

          timingFunction = _props.timingFunction,

          bottomOpacity = _state.bottomOpacity,

        { style: { position: "relative" } },

        { style: _extends({}, defaultStyle, { position: "relative" }) },

        topSrc && React.createElement("img", {

          style: _extends({}, style, { position: "absolute" }),

          style: _extends({}, defaultStyle, style, { position: "absolute" }),

        bottomSrc && React.createElement("img", {

          style: _extends({}, defaultStyle, style, {

            transition: "opacity " + duration / 1000 + "s " + timingFunction + " " + delay / 1000 + "s"

var defaultStyle = { maxWidth: "100%", maxHeight: "100%" };

export default class CrossfadeImage extends Component {

      // Reset the component everytime we receive new prop, to

      // cancel out any animation that's still going on

      this.setState({ bottomSrc: false, topSrc: false }, () =>

          { bottomSrc: oldSrc, topSrc: newSrc, bottomOpacity: 0.99 },

            if (!this.timeout) clearTimeout(this.timeout);

              () => this.setState({ bottomOpacity: 0 }),

    const { duration, timingFunction, delay, style } = this.props;

    const { topSrc, bottomOpacity, bottomSrc } = this.state;

              ...{ position: "absolute" }

            style={{ ...defaultStyle, ...style, ...{ position: "absolute" } }}

                transition: `opacity ${duration / 1000}s ${timingFunction} ${delay / 1000}s`

const defaultStyle = { maxWidth: "100%", maxHeight: "100%" };

  "description": "Simple React component for crossfading images",

    "test": "echo \"Error: no test specified\" && exit 1",

    "prepublish": "babel index.js --out-file index.es5.js",

    "url": "https://github.com/khanglu/react-crossfade-image.git"

  "author": "Khang Lu <info@khang.lu> (https://khang.lu/)",

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

Duration of the fade, in ms - default to 300

Support all CSS timing functions - default to 'ease'

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

Custom styling for the image - e.g. maxWidth: '100%', maxHeight: '100%' for responsive image scaling

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

		{
		"name": "react-crossfade-image",
		"version": "1.0.6",
		"version": "1.0.7",
		"description": "Simple React component for crossfading images",
		@@ -5,0 +5,0 @@ "main": "index.es5.js",

		@@ -35,3 +35,3 @@ # react-crossfade-image
		### style
		Custom styling for the image - e.g. maxWidth: '100%', maxHeight: '100%' for responsive image scaling
		Custom styling for the image - default to { maxWidth: '100%', maxHeight: '100%' } for responsive image scaling

		@@ -38,0 +38,0 @@ ## License

		@@ -69,9 +69,9 @@ var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
		"div",
		{ style: { position: "relative" } },
		{ style: _extends({}, defaultStyle, { position: "relative" }) },
		topSrc && React.createElement("img", {
		style: _extends({}, style, { position: "absolute" }),
		style: _extends({}, defaultStyle, style, { position: "absolute" }),
		src: topSrc
		}),
		bottomSrc && React.createElement("img", {
		style: _extends({}, style, {
		style: _extends({}, defaultStyle, style, {
		opacity: bottomOpacity,
		@@ -92,2 +92,4 @@ transition: "opacity " + duration / 1000 + "s " + timingFunction + " " + delay / 1000 + "s"

		var defaultStyle = { maxWidth: "100%", maxHeight: "100%" };

		CrossfadeImage.propTypes = {
		@@ -94,0 +96,0 @@ src: PropTypes.string.isRequired,

		@@ -40,9 +40,6 @@ import React, { Component } from "react";
		return (
		<div style={{ position: "relative" }}>
		<div style={{ ...defaultStyle, ...{ position: "relative" } }}>
		{topSrc &&
		<img
		style={{
		...style,
		...{ position: "absolute" }
		}}
		style={{ ...defaultStyle, ...style, ...{ position: "absolute" } }}
		src={topSrc}
		@@ -53,2 +50,3 @@ />}
		style={{
		...defaultStyle,
		...style,
		@@ -67,2 +65,4 @@ ...{

		const defaultStyle = { maxWidth: "100%", maxHeight: "100%" };

		CrossfadeImage.propTypes = {
		@@ -69,0 +69,0 @@ src: PropTypes.string.isRequired,

Improved metrics