react-card-flip - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

lib/ReactCardFlip.d.ts

 export interface ReactFlipCardProps {
-  /**z-Index for the flip card. Used to help solve context stack issues while using multiple flip cards.
+  /**
+   * z-Index for the flip card. Used to help solve context stack issues while using multiple flip cards.
    * @default 'auto'
@@ -10,11 +11,19 @@ */
   containerStyle?: {};
-  /**False to show the front of the card, true to show the back
+  /**
+   * Custom container class name.
    * @default undefined
    */
+  containerClassName?: string;
+  /**
+   * False to show the front of the card, true to show the back
+   * @default undefined
+   */
   isFlipped?: boolean;
-  /**The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation
+  /**
+   * The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation
    * @default 0.6
    */
   flipSpeedBackToFront?: number;
-  /**The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation
+  /**
+   * The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation
    * @default 0.6
@@ -25,3 +34,4 @@ */
   cardStyles?: { front?: {}; back?: {} };
-  /**False to rotate in opposite directions on both sides of the card, true to rotate in the same direction
+  /**
+   * False to rotate in opposite directions on both sides of the card, true to rotate in the same direction
    * @default false
@@ -28,0 +38,0 @@ */

lib/ReactCardFlip.js

@@ -36,3 +36,3 @@ "use strict";
 var ReactCardFlip = function (props) {
-    var _a = props.cardStyles, back = _a.back, front = _a.front, cardZIndex = props.cardZIndex, containerStyle = props.containerStyle, flipDirection = props.flipDirection, flipSpeedFrontToBack = props.flipSpeedFrontToBack, flipSpeedBackToFront = props.flipSpeedBackToFront, infinite = props.infinite;
+    var _a = props.cardStyles, back = _a.back, front = _a.front, cardZIndex = props.cardZIndex, containerStyle = props.containerStyle, containerClassName = props.containerClassName, flipDirection = props.flipDirection, flipSpeedFrontToBack = props.flipSpeedFrontToBack, flipSpeedBackToFront = props.flipSpeedBackToFront, infinite = props.infinite;
     var _b = react_1.useState(props.isFlipped), isFlipped = _b[0], setFlipped = _b[1];
@@ -46,2 +46,9 @@ var _c = react_1.useState(0), rotation = _c[0], setRotation = _c[1];
     }, [props.isFlipped]);
+    var getContainerClassName = react_1.useMemo(function () {
+        var className = 'react-card-flip';
+        if (containerClassName) {
+            className += " " + containerClassName;
+        }
+        return className;
+    }, [containerClassName]);
     var getComponent = function (key) {
@@ -70,3 +77,3 @@ if (props.children.length !== 2) {
     };
-    return (React.createElement("div", { className: "react-card-flip", style: __assign(__assign({}, styles.container), containerStyle) },
+    return (React.createElement("div", { className: getContainerClassName, style: __assign(__assign({}, styles.container), containerStyle) },
         React.createElement("div", { className: "react-card-flipper", style: styles.flipper },
@@ -73,0 +80,0 @@ React.createElement("div", { className: "react-card-front", style: styles.front }, getComponent(0)),

package.json

 {
   "name": "react-card-flip",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "ReactCardFlip",
@@ -5,0 +5,0 @@ "main": "./lib/ReactCardFlip.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15398

increased by2.93%

Lines of code

140

increased by13.82%

No dependency changes