support both className and inline styles override

Author: shettypuneeth

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 90,
+  "tabWidth": 4
+}

package.json

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

src/CarouselItem.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { getMergedStyles } from "./getMergedStyles";
 
 export default React.memo(function CarouselItem(props) {
     const {
@@ -31,10 +32,15 @@ export default React.memo(function CarouselItem(props) {
         transform,
         zIndex,
     };
-    const mergedStyles = Object.assign({}, styleOverride, computedStyle);
+
+    const [className, inlineStyle] = getMergedStyles(
+        "rcsc-item",
+        computedStyle,
+        styleOverride
+    );
 
     return (
-        <div style={mergedStyles} className="rcsc-item">
+        <div style={inlineStyle} className={className}>
             {children}
         </div>
     );

src/Navigation.jsx

@@ -1,23 +1,27 @@
 import { ArrowLeft, ArrowRight } from "./Icons";
+import { getMergedStyles } from "./getMergedStyles";
 
 export default function Navigation(props) {
     const { onNext, onPrevious, styleOverrides } = props;
     const arrowSize = 16;
 
+    const [containerClassName, containerInlineStyle] = getMergedStyles(
+        "rcsc-nav-container",
+        null,
+        styleOverrides.Navigation
+    );
+    const [iconClassName, iconInlineStyle] = getMergedStyles(
+        "rcsc-nav-icon",
+        null,
+        styleOverrides.NavIcon
+    );
+
     return (
-        <nav style={styleOverrides.Navigation} className="rcsc-nav-container">
-            <div
-                style={styleOverrides.NavIcon}
-                onClick={onPrevious}
-                className="rcsc-nav-icon"
-            >
+        <nav style={containerInlineStyle} className={containerClassName}>
+            <div style={iconInlineStyle} onClick={onPrevious} className={iconClassName}>
                 <ArrowLeft color="#fff" size={arrowSize} />
             </div>
-            <div
-                style={styleOverrides.NavIcon}
-                onClick={onNext}
-                className="rcsc-nav-icon"
-            >
+            <div style={iconInlineStyle} onClick={onNext} className={iconClassName}>
                 <ArrowRight color="#fff" size={arrowSize} />
             </div>
         </nav>

src/StackedCarousel.jsx

@@ -3,6 +3,7 @@ import CarouselItem from "./CarouselItem";
 import Navigation from "./Navigation";
 import { useCardStackCarousel } from "./useCardStackCarousel";
 import { useRootHeight } from "./useRootHeight";
+import { getMergedStyles } from "./getMergedStyles";
 
 export function StackedCarousel(props) {
     const {
@@ -50,11 +51,13 @@ export function StackedCarousel(props) {
         });
     };
 
-    const { Root } = styleOverrides;
-    const styles = Object.assign({}, Root, { height: rootHeight });
-
+    const [className, inlineStyle] = getMergedStyles(
+        "rcsc-container",
+        { height: rootHeight },
+        styleOverrides.Root
+    );
     return (
-        <section className="rcsc-container" style={styles}>
+        <section className={className} style={inlineStyle}>
             {renderCards()}
 
             <Navigation

src/getMergedStyles.js

@@ -0,0 +1,13 @@
+export const getMergedStyles = (className, inlineStyle, styleOverride) => {
+    if (styleOverride) {
+        if (typeof styleOverride === "string") {
+            const mergedClassName = `${className} ${styleOverride}`;
+            return [mergedClassName, inlineStyle];
+        } else {
+            const mergedInlineStyle = Object.assign({}, styleOverride, inlineStyle);
+            return [className, mergedInlineStyle];
+        }
+    }
+
+    return [className, inlineStyle];
+};

styles/styles.css

@@ -11,7 +11,7 @@
 
 .rcsc-nav-container {
     position: absolute;
-    bottom: -40px;
+    bottom: -44px;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -25,7 +25,7 @@
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    margin: 0 5px;
+    margin: 0 6px;
     padding: 8px;
     cursor: pointer;
     background-color: #374151;

types/index.d.ts

@@ -2,7 +2,7 @@ declare module "react-card-stack-carousel" {
     import { ReactNode } from "react";
 
     type StyleKeys = "Root" | "CarouselItem" | "Navigation" | "NavIcon";
-    type StyleOverrides = Record<StyleKeys, React.CSSProperties>;
+    type StyleOverrides = Record<StyleKeys, React.CSSProperties | string>;
 
     export interface StackedCarouselProps {
         height: number | string;