react-crossfade-image - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

example/App.js

@@ -7,4 +7,3 @@ import React, { Component } from "react";
   "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg",
-  "http://is2.mzstatic.com/image/thumb/Purple122/v4/d2/36/28/d23628e5-c9bf-d0fb-104f-61fa52976ff5/source/175x175bb.jpg",
-  "http://a4.mzstatic.com/us/r30/Purple62/v4/1f/8d/f9/1f8df910-8ec7-3b8e-0104-d44e869f4d65/icon175x175.jpeg"
+  "http://is2.mzstatic.com/image/thumb/Purple122/v4/d2/36/28/d23628e5-c9bf-d0fb-104f-61fa52976ff5/source/175x175bb.jpg"
 ];
@@ -35,5 +34,3 @@
         />
-        <button onClick={this.changeImage}>
-          Change Image
-        </button>
+        <button onClick={this.changeImage}>Change Image</button>
       </div>
@@ -40,0 +37,0 @@ );

index.es5.js

@@ -58,2 +58,3 @@ 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; };
       var _props = this.props,
+          containerClass = _props.containerClass,
           duration = _props.duration,
@@ -71,3 +72,3 @@ timingFunction = _props.timingFunction,
         "div",
-        { style: _extends({}, defaultStyle, { position: "relative" }) },
+        { className: containerClass, style: _extends({}, defaultStyle, { position: "relative" }) },
         topSrc && React.createElement("img", {
@@ -103,3 +104,4 @@ style: _extends({}, defaultStyle, style, { position: "absolute" }),
   delay: PropTypes.number,
-  style: PropTypes.object
+  style: PropTypes.object,
+  containerClass: PropTypes.string
 };
@@ -110,3 +112,4 @@
   timingFunction: "ease",
-  delay: 0
+  delay: 0,
+  containerClass: "CrossfadeImage"
 };

index.js

@@ -37,6 +37,6 @@ import React, { Component } from "react";
   render() {
-    const { duration, timingFunction, delay, style, alt } = this.props;
+    const { containerClass, duration, timingFunction, delay, style, alt } = this.props;
     const { topSrc, bottomOpacity, bottomSrc } = this.state;
     return (
-      <div style={{ ...defaultStyle, ...{ position: "relative" } }}>
+      <div className={containerClass} style={{ ...defaultStyle, ...{ position: "relative" } }}>
         {topSrc &&
@@ -73,3 +73,4 @@ <img
   delay: PropTypes.number,
-  style: PropTypes.object
+  style: PropTypes.object,
+  containerClass: PropTypes.string,
 };
@@ -80,3 +81,4 @@
   timingFunction: "ease",
-  delay: 0
+  delay: 0,
+  containerClass: "CrossfadeImage",
 };

package.json

 {
   "name": "react-crossfade-image",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Simple React component for crossfading images",
@@ -37,4 +37,4 @@ "main": "index.es5.js",
     "webpack": "^2.5.1",
-    "webpack-dev-server": "^2.4.5"
+    "webpack-dev-server": "^2.11.5"
   }
 }

README.md

@@ -39,4 +39,8 @@ # react-crossfade-image
 
+### containerClass
+
+Custom class string for the container element - default to 'CrossfadeImage'
+
 ## License
 MIT
 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

46

increased by9.52%

Worsened metrics

Total package byte prevSize

13206

decreased by-94.99%

Number of package files

9

decreased by-10%

Lines of code

249

decreased by-96.74%

No dependency changes