Update latest build

lib/ReactCardFlip.d.ts

@@ -1,27 +1,37 @@
 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'
    */
   cardZIndex?: string;
   /**Extra css styling that can be applied to the container.
    * @default {}
    */
   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
    */
   flipSpeedFrontToBack?: number;
 
   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
    */
   infinite?: boolean;

lib/ReactCardFlip.js

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var react_1 = require("react");
 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];
     var _c = react_1.useState(0), rotation = _c[0], setRotation = _c[1];
     react_1.useEffect(function () {
@@ -42,6 +42,13 @@ var ReactCardFlip = function (props) {
             setRotation(function (c) { return c + 180; });
         }
     }, [props.isFlipped]);
+    var getContainerClassName = react_1.useMemo(function () {
+        var className = 'react-card-flip';
+        if (containerClassName) {
+            className += " " + containerClassName;
+        }
+        return className;
+    }, [containerClassName]);
     var getComponent = function (key) {
         if (props.children.length !== 2) {
             throw new Error('Component ReactCardFlip requires 2 children to function');
@@ -65,7 +72,7 @@ var ReactCardFlip = function (props) {
         },
         front: __assign({ WebkitBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', height: '100%', left: '0', position: isFlipped ? 'absolute' : 'relative', top: '0', transform: flipDirection === 'horizontal' ? frontRotateY : frontRotateX, transformStyle: 'preserve-3d', transition: flipSpeedBackToFront + "s", width: '100%', zIndex: '2' }, front),
     };
-    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 },
             React.createElement("div", { className: "react-card-front", style: styles.front }, getComponent(0)),
             React.createElement("div", { className: "react-card-back", style: styles.back }, getComponent(1)))));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-card-flip",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "ReactCardFlip",
   "main": "./lib/ReactCardFlip.js",
   "types": "./lib/ReactCardFlip.d.ts",