react-crossfade-image
Advanced tools
Comparing version 1.0.9 to 1.1.0
@@ -61,3 +61,4 @@ 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; }; | ||
| delay = _props.delay, | ||
| style = _props.style; | ||
| style = _props.style, | ||
| alt = _props.alt; | ||
| var _state = this.state, | ||
@@ -73,3 +74,4 @@ topSrc = _state.topSrc, | ||
| style: _extends({}, defaultStyle, style, { position: "absolute" }), | ||
| src: topSrc | ||
| src: topSrc, | ||
| alt: alt | ||
| }), | ||
@@ -97,2 +99,3 @@ bottomSrc && React.createElement("img", { | ||
| src: PropTypes.string.isRequired, | ||
| alt: PropTypes.string, | ||
| duration: PropTypes.number, | ||
@@ -99,0 +102,0 @@ timingFunction: PropTypes.string, |
32
index.js
@@ -1,7 +0,7 @@ | ||
| import React, { Component } from "react" | ||
| import PropTypes from "prop-types" | ||
| import React, { Component } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| export default class CrossfadeImage extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| super(props); | ||
| this.state = { | ||
@@ -11,7 +11,7 @@ topSrc: props.src, | ||
| bottomSrc: props.src | ||
| } | ||
| }; | ||
| } | ||
| componentWillReceiveProps(newProps) { | ||
| const oldSrc = this.state.topSrc | ||
| const newSrc = newProps.src | ||
| const oldSrc = this.state.topSrc; | ||
| const newSrc = newProps.src; | ||
| if (newSrc !== oldSrc) { | ||
@@ -27,15 +27,15 @@ // Reset the component everytime we receive new prop, to | ||
| // getting fade out transition without css keyframe | ||
| if (!this.timeout) clearTimeout(this.timeout) | ||
| if (!this.timeout) clearTimeout(this.timeout); | ||
| this.timeout = setTimeout( | ||
| () => this.setState({ bottomOpacity: 0 }), | ||
| 20 | ||
| ) | ||
| ); | ||
| } | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
| render() { | ||
| const { duration, timingFunction, delay, style } = this.props | ||
| const { topSrc, bottomOpacity, bottomSrc } = this.state | ||
| const { duration, timingFunction, delay, style, alt } = this.props; | ||
| const { topSrc, bottomOpacity, bottomSrc } = this.state; | ||
| return ( | ||
@@ -47,2 +47,3 @@ <div style={{ ...defaultStyle, ...{ position: "relative" } }}> | ||
| src={topSrc} | ||
| alt={alt} | ||
| />} | ||
@@ -62,10 +63,11 @@ {bottomSrc && | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
| const defaultStyle = { maxWidth: "100%", maxHeight: "100%" } | ||
| const defaultStyle = { maxWidth: "100%", maxHeight: "100%" }; | ||
| CrossfadeImage.propTypes = { | ||
| src: PropTypes.string.isRequired, | ||
| alt: PropTypes.string, | ||
| duration: PropTypes.number, | ||
@@ -75,3 +77,3 @@ timingFunction: PropTypes.string, | ||
| style: PropTypes.object | ||
| } | ||
| }; | ||
@@ -82,2 +84,2 @@ CrossfadeImage.defaultProps = { | ||
| delay: 0 | ||
| } | ||
| }; |
| { | ||
| "name": "react-crossfade-image", | ||
| "version": "1.0.9", | ||
| "version": "1.1.0", | ||
| "description": "Simple React component for crossfading images", | ||
@@ -5,0 +5,0 @@ "main": "index.es5.js", |
| # react-crossfade-image | ||
|  | ||
| Simple component for crossfading images. Just pass it a new src prop and enjoy the fade! | ||
|  | ||
| ## Usage | ||
@@ -15,8 +19,3 @@ | ||
| ```javascript | ||
| <CrossfadeImage | ||
| src={imageSrc} | ||
| duration={500} | ||
| timingFunction={"ease-out"} | ||
| delay={200} | ||
| /> | ||
| <CrossfadeImage src={imageSrc} /> | ||
| ``` | ||
@@ -23,0 +22,0 @@ |
Improved metrics
- Total package byte prevSize
- increased by0.18%
130195
- Lines of code
- increased by2.07%
247
Worsened metrics
- Number of lines in readme file
- decreased by-2.33%
42