added support for responsive height

Author: shettypuneeth

README.md

@@ -52,23 +52,34 @@ export default function App() {
 }
 ```
 
+## Responsive height
+
+Height prop supports [Tailwind CSS based](https://tailwindcss.com/docs/responsive-design) breakpoint system to accommodate responsive design.
+To specify a height at a certain breakpoint, prefix the breakpoint name, followed by the ":" character.
+
+```html
+<!-- 200px on mobile (default), 500px on medium screens and 750px on large screens -->
+<StackedCarousel height="200 md:500 lg:750">{...}</StackedCarousel>
+```
+
+Visit [responsive-design](https://tailwindcss.com/docs/responsive-design) for the exhaustive list of supported breakpoints.
+
 ## Props
 
-| Prop                    | Type      | Default                              | Required | Description                                       |
-| ----------------------- | --------- | ------------------------------------ | -------- | ------------------------------------------------- |
-| `height`                | number    | -                                    | Yes      | Height of the carousel.                           |
-| `children`              | ReactNode | -                                    | Yes      | Children nodes of the carousel.                   |
-| `autoplay`              | boolean   | false                                | No       | Automatically transition between items.           |
-| `autoplayInterval`      | number    | 4000                                 | No       | Interval between automatic transitions.           |
-| `containerClassName`    | string    | -                                    | No       | CSS class name for the carousel container.        |
-| `easingFunction`        | string    | cubic-bezier(0.93, 0.01, 0.39, 1.01) | No       | Easing function to use for the transitions.       |
-| `navContainerClassName` | string    | -                                    | No       | CSS class name for the navigation container.      |
-| `onNext`                | function  | -                                    | No       | Callback function on moving to the next item.     |
-| `onPrevious`            | function  | -                                    | No       | Callback function on moving to the previous item. |
-| `scaleFactor`           | number    | 0.9                                  | No       | Scale factor for the carousel items.              |
-| `startIndex`            | number    | 0                                    | No       | Index of the item to start on.                    |
-| `transitionDuration`    | number    | 400                                  | No       | Duration of the transitions in milliseconds.      |
-| `verticalOffset`        | number    | 10                                   | No       | % vertical offset for the carousel items.         |
+| Prop                 | Type             | Default                              | Required | Description                                       |
+| -------------------- | ---------------- | ------------------------------------ | -------- | ------------------------------------------------- |
+| `height`             | number or string | -                                    | Yes      | Height of the carousel.                           |
+| `children`           | ReactNode        | -                                    | Yes      | Children nodes of the carousel.                   |
+| `autoplay`           | boolean          | false                                | No       | Automatically transition between items.           |
+| `autoplayInterval`   | number           | 4000                                 | No       | Interval between automatic transitions.           |
+| `easingFunction`     | string           | cubic-bezier(0.93, 0.01, 0.39, 1.01) | No       | Easing function to use for the transitions.       |
+| `onNext`             | function         | -                                    | No       | Callback function on moving to the next item.     |
+| `onPrevious`         | function         | -                                    | No       | Callback function on moving to the previous item. |
+| `styleOverrides`     | object           | -                                    | No       | Override default styles of the carousel           |
+| `scaleFactor`        | number           | 0.9                                  | No       | Scale factor for the carousel items.              |
+| `startIndex`         | number           | 0                                    | No       | Index of the item to start on.                    |
+| `transitionDuration` | number           | 400                                  | No       | Duration of the transitions in milliseconds.      |
+| `verticalOffset`     | number           | 10                                   | No       | % vertical offset for the carousel items.         |
 
 ## Running locally
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-card-stack-carousel",
-    "version": "0.1.5",
+    "version": "0.2.0",
     "description": "A tiny configurable carousel component for React",
     "main": "dist/index.js",
     "scripts": {

playground/App.jsx

@@ -1,28 +1,15 @@
 import React from "react";
-import { StackedCarousel } from "react-card-stack-carousel";
+import { StackedCarousel } from "react-card-stack-carousel/index";
 import "react-card-stack-carousel/styles/styles.css";
 
 export default function App() {
-    const cardWidth = 200;
-    const cardHeight = 200;
-
-    const cardStyles = { width: cardWidth, height: cardHeight };
-
     return (
         <main className="container">
-            <StackedCarousel autoplay={false} height={cardHeight}>
-                <div className="sample-card bg-color-1" style={cardStyles}>
-                    0
-                </div>
-                <div className="sample-card bg-color-2" style={cardStyles}>
-                    1
-                </div>
-                <div className="sample-card bg-color-3" style={cardStyles}>
-                    2
-                </div>
-                <div className="sample-card bg-color-4" style={cardStyles}>
-                    3
-                </div>
+            <StackedCarousel autoplay={false} height={"200 md:500"}>
+                <div className="sample-card bg-color-1">0</div>
+                <div className="sample-card bg-color-2">1</div>
+                <div className="sample-card bg-color-3">2</div>
+                <div className="sample-card bg-color-4">3</div>
             </StackedCarousel>
         </main>
     );

playground/styles.css

@@ -24,6 +24,15 @@ body {
     color: #fff;
     font-family: sans-serif;
     font-size: 1.5em;
+    height: 200px;
+    width: 200px;
+}
+
+@media screen and (min-width: 768px) {
+    .sample-card {
+        height: 500px;
+        width: 500px;
+    }
 }
 
 .bg-color-1 {

src/CarousalItem.jsx src/CarouselItem.jsxsrc/CarousalItem.jsx renamed to src/CarouselItem.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 
-export default React.memo(function CarousalItem(props) {
+export default React.memo(function CarouselItem(props) {
     const {
         easing,
         delay,
         transitionDuration,
         opacity,
         rotateX,
         scale,
+        styleOverride,
         tX,
         tY,
         tZ,
@@ -23,16 +24,17 @@ export default React.memo(function CarousalItem(props) {
         scale(${scale})
     `;
 
-    const style = {
+    const computedStyle = {
         opacity,
         transition,
         transitionDelay: `${delay}s, ${delay}s`,
         transform,
         zIndex,
     };
+    const mergedStyles = Object.assign({}, styleOverride, computedStyle);
 
     return (
-        <div style={style} className="rcsc-item">
+        <div style={mergedStyles} className="rcsc-item">
             {children}
         </div>
     );

src/Navigation.jsx

@@ -1,17 +1,23 @@
 import { ArrowLeft, ArrowRight } from "./Icons";
 
 export default function Navigation(props) {
-    const { className = "", onNext, onPrevious } = props;
+    const { onNext, onPrevious, styleOverrides } = props;
     const arrowSize = 16;
 
-    const containerClasses = `rcsc-nav-container ${className}`;
-
     return (
-        <nav className={containerClasses}>
-            <div onClick={onPrevious} className="rcsc-nav-icon">
+        <nav style={styleOverrides.Navigation} className="rcsc-nav-container">
+            <div
+                style={styleOverrides.NavIcon}
+                onClick={onPrevious}
+                className="rcsc-nav-icon"
+            >
                 <ArrowLeft color="#fff" size={arrowSize} />
             </div>
-            <div onClick={onNext} className="rcsc-nav-icon">
+            <div
+                style={styleOverrides.NavIcon}
+                onClick={onNext}
+                className="rcsc-nav-icon"
+            >
                 <ArrowRight color="#fff" size={arrowSize} />
             </div>
         </nav>

src/StackedCarousel.jsx

@@ -1,21 +1,21 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useCardStackCarousel } from "./useCardStackCarousel";
-import CarousalItem from "./CarousalItem";
+import CarouselItem from "./CarouselItem";
 import Navigation from "./Navigation";
+import { getRootHeight } from "./getRootHeight";
 
 export function StackedCarousel(props) {
     const {
         autoplay,
         autoplayInterval,
         children,
-        containerClassName,
         easingFunction,
         height,
-        navContainerClassName,
         onNext,
         onPrevious,
         scaleFactor,
         startIndex,
+        styleOverrides = {},
         transitionDuration,
         verticalOffset,
     } = props;
@@ -38,22 +38,27 @@ export function StackedCarousel(props) {
             const styles = getState(index);
 
             return (
-                <CarousalItem key={index} {...styles}>
+                <CarouselItem
+                    key={index}
+                    styleOverride={styleOverrides.CarouselItem}
+                    {...styles}
+                >
                     {child}
-                </CarousalItem>
+                </CarouselItem>
             );
         });
     };
 
-    const styles = { height };
-    const containerClasses = `rcsc-container ${containerClassName || ""}`;
+    const { Root } = styleOverrides;
+    const rootHeight = useMemo(() => Number(getRootHeight(height)), [height]);
+    const styles = Object.assign({}, Root, { height: rootHeight });
 
     return (
-        <section className={containerClasses} style={styles}>
+        <section className="rcsc-container" style={styles}>
             {renderCards()}
 
             <Navigation
-                className={navContainerClassName}
+                styleOverrides={styleOverrides}
                 onNext={handleNext}
                 onPrevious={handlePrevious}
             />

src/getRootHeight.js

@@ -0,0 +1,39 @@
+const BREAKPOINTS = [
+    { name: "2xl", value: 1536 },
+    { name: "xl", value: 1280 },
+    { name: "lg", value: 1024 },
+    { name: "md", value: 768 },
+    { name: "sm", value: 640 },
+];
+
+export const getRootHeight = (heightProp) => {
+    if (!heightProp) {
+        throw new Error("'height' prop is required");
+    }
+
+    if (typeof heightProp === "number") {
+        return heightProp;
+    }
+
+    for (const breakpoint of BREAKPOINTS) {
+        const mediaQuery = window.matchMedia(
+            `(min-width: ${breakpoint.value}px)`
+        );
+
+        if (mediaQuery.matches) {
+            const regex = new RegExp(`${breakpoint.name}:(\\d+)`);
+            const matches = regex.exec(heightProp);
+            if (matches) {
+                return matches[1];
+            }
+        }
+    }
+
+    // fallback to default
+    const defaultHeightMatch = heightProp.match(/^(\d+)/);
+    if (defaultHeightMatch) {
+        return defaultHeightMatch[1];
+    } else {
+        throw new Error(`Invalid height prop: ${heightProp}`);
+    }
+};

types/index.d.ts

@@ -1,8 +1,11 @@
 declare module "react-card-stack-carousel" {
     import { ReactNode } from "react";
 
+    type StyleKeys = "Root" | "CarouselItem" | "Navigation" | "NavIcon";
+    type StyleOverrides = Record<StyleKeys, React.CSSProperties>;
+
     export interface StackedCarouselProps {
-        height: number;
+        height: number | string;
         children: ReactNode;
         autoplay?: boolean;
         autoplayInterval?: number;
@@ -13,6 +16,7 @@ declare module "react-card-stack-carousel" {
         onPrevious?: () => void;
         scaleFactor?: number;
         startIndex?: number;
+        styleOverrides?: StyleOverrides;
         transitionDuration?: number;
         verticalOffset?: number;
     }