From 31ba0a6f3513e112fa37af7067451cafeece43e0 Mon Sep 17 00:00:00 2001
From: Tasnim Alam <tasnimalamcse@gmail.com>
Date: Thu, 26 Mar 2020 14:20:38 +0600
Subject: [PATCH 1/2] Add label style options

---
 src/ReactCompareImage.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/ReactCompareImage.jsx b/src/ReactCompareImage.jsx
index d385aff..adbd45b 100644
--- a/src/ReactCompareImage.jsx
+++ b/src/ReactCompareImage.jsx
@@ -11,11 +11,13 @@ const propTypes = {
   leftImageAlt: PropTypes.string,
   leftImageCss: PropTypes.object, // eslint-disable-line
   leftImageLabel: PropTypes.string,
+  leftLabelCss: PropTypes.object, // eslint-disable-line
   onSliderPositionChange: PropTypes.func,
   rightImage: PropTypes.string.isRequired,
   rightImageAlt: PropTypes.string,
   rightImageCss: PropTypes.object, // eslint-disable-line
   rightImageLabel: PropTypes.string,
+  rightLabelCss: PropTypes.object, // eslint-disable-line
   skeleton: PropTypes.element,
   sliderLineColor: PropTypes.string,
   sliderLineWidth: PropTypes.number,
@@ -31,10 +33,12 @@ const defaultProps = {
   leftImageAlt: '',
   leftImageCss: {},
   leftImageLabel: null,
+  leftLabelCss: {},
   onSliderPositionChange: () => {},
   rightImageAlt: '',
   rightImageCss: {},
   rightImageLabel: null,
+  rightLabelCss: {},
   skeleton: null,
   sliderLineColor: '#ffffff',
   sliderLineWidth: 2,
@@ -52,11 +56,13 @@ function ReactCompareImage(props) {
     leftImageAlt,
     leftImageCss,
     leftImageLabel,
+    leftLabelCss,
     onSliderPositionChange,
     rightImage,
     rightImageAlt,
     rightImageCss,
     rightImageLabel,
+    rightLabelCss,
     skeleton,
     sliderLineColor,
     sliderLineWidth,
@@ -435,12 +441,16 @@ function ReactCompareImage(props) {
         {/* labels */}
         {leftImageLabel && (
           <div style={styles.leftLabelContainer}>
-            <div style={styles.leftLabel}>{leftImageLabel}</div>
+            <div style={{ ...styles.leftLabel, ...leftLabelCss }}>
+              {leftImageLabel}
+            </div>
           </div>
         )}
         {rightImageLabel && (
           <div style={styles.rightLabelContainer}>
-            <div style={styles.rightLabel}>{rightImageLabel}</div>
+            <div style={{ ...styles.rightLabel, ...rightLabelCss }}>
+              {rightImageLabel}
+            </div>
           </div>
         )}
       </div>

From a6483c61cab9f09a4f43316b5ab281e8a803eb1b Mon Sep 17 00:00:00 2001
From: "Md. Tasnim Alam" <tasnimalamcse@gmail.com>
Date: Sat, 4 Sep 2021 15:36:39 +0600
Subject: [PATCH 2/2] rename label style property names

---
 src/ReactCompareImage.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/ReactCompareImage.tsx b/src/ReactCompareImage.tsx
index ad4cb47..3a06184 100644
--- a/src/ReactCompareImage.tsx
+++ b/src/ReactCompareImage.tsx
@@ -9,11 +9,13 @@ interface IProps {
   leftImageAlt?: string;
   leftImageCss?: object;
   leftImageLabel?: string;
+  leftImageLabelCss?: object;
   onSliderPositionChange?: (position: number) => void;
   rightImage: string;
   rightImageAlt?: string;
   rightImageCss?: object;
   rightImageLabel?: string;
+  rightImageLabelCss?: object;
   skeleton?: React.ReactNode;
   sliderLineColor?: string;
   sliderLineWidth?: number;
@@ -29,12 +31,12 @@ const defaultProps = {
   leftImageAlt: '',
   leftImageCss: {},
   leftImageLabel: null,
-  leftLabelCss: {},
+  leftImageLabelCss: {},
   onSliderPositionChange: () => {},
   rightImageAlt: '',
   rightImageCss: {},
   rightImageLabel: null,
-  rightLabelCss: {},
+  rightImageLabelCss: {},
   skeleton: null,
   sliderLineColor: '#ffffff',
   sliderLineWidth: 2,
@@ -52,13 +54,13 @@ const ReactCompareImage: React.FC<IProps> = props => {
     leftImageAlt,
     leftImageCss,
     leftImageLabel,
-    leftLabelCss,
+    leftImageLabelCss,
     onSliderPositionChange,
     rightImage,
     rightImageAlt,
     rightImageCss,
     rightImageLabel,
-    rightLabelCss,
+    rightImageLabelCss,
     skeleton,
     sliderLineColor,
     sliderLineWidth,
@@ -426,14 +428,14 @@ const ReactCompareImage: React.FC<IProps> = props => {
         {/* labels */}
         {leftImageLabel && (
           <div style={styles.leftLabelContainer}>
-            <div style={{ ...styles.leftLabel, ...leftLabelCss }}>
+            <div style={{ ...styles.leftLabel, ...leftImageLabelCss }}>
               {leftImageLabel}
             </div>
           </div>
         )}
         {rightImageLabel && (
           <div style={styles.rightLabelContainer}>
-            <div style={{ ...styles.rightLabel, ...rightLabelCss }}>
+            <div style={{ ...styles.rightLabel, ...rightImageLabelCss }}>
               {rightImageLabel}
             </div>
           </div>