From 7b138de5f4648d7f2311aab59ec42032d8bed4fe Mon Sep 17 00:00:00 2001
From: isengartz <kontokostas.thanasis@gmail.com>
Date: Thu, 28 May 2020 22:47:54 +0300
Subject: [PATCH 1/2] Added SrcSet for both Images + container Style and class

---
 src/ReactCompareImage.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/ReactCompareImage.jsx b/src/ReactCompareImage.jsx
index d385aff..88ef6fa 100644
--- a/src/ReactCompareImage.jsx
+++ b/src/ReactCompareImage.jsx
@@ -8,15 +8,19 @@ const propTypes = {
   handleSize: PropTypes.number,
   hover: PropTypes.bool,
   leftImage: PropTypes.string.isRequired,
+  leftImageSrcSet: PropTypes.string,
   leftImageAlt: PropTypes.string,
   leftImageCss: PropTypes.object, // eslint-disable-line
   leftImageLabel: PropTypes.string,
   onSliderPositionChange: PropTypes.func,
   rightImage: PropTypes.string.isRequired,
+  rightImageSrcSet: PropTypes.string,
   rightImageAlt: PropTypes.string,
   rightImageCss: PropTypes.object, // eslint-disable-line
   rightImageLabel: PropTypes.string,
   skeleton: PropTypes.element,
+  containerStyle: PropTypes.object,
+  containerClass: PropTypes.string,
   sliderLineColor: PropTypes.string,
   sliderLineWidth: PropTypes.number,
   sliderPositionPercentage: PropTypes.number,
@@ -28,18 +32,23 @@ const defaultProps = {
   handle: null,
   handleSize: 40,
   hover: false,
+  leftImageSrcSet: null,
   leftImageAlt: '',
   leftImageCss: {},
   leftImageLabel: null,
   onSliderPositionChange: () => {},
+  rightImageSrcSet: null,
   rightImageAlt: '',
   rightImageCss: {},
   rightImageLabel: null,
   skeleton: null,
+  containerStyle: {},
+  containerClass: '',
   sliderLineColor: '#ffffff',
   sliderLineWidth: 2,
   sliderPositionPercentage: 0.5,
   vertical: false,
+  
 };
 
 function ReactCompareImage(props) {
@@ -49,19 +58,24 @@ function ReactCompareImage(props) {
     handleSize,
     hover,
     leftImage,
+    leftImageSrcSet,
     leftImageAlt,
     leftImageCss,
     leftImageLabel,
     onSliderPositionChange,
     rightImage,
+    rightImageSrcSet,
     rightImageAlt,
     rightImageCss,
     rightImageLabel,
     skeleton,
+    containerStyle,
+    containerClass,
     sliderLineColor,
     sliderLineWidth,
     sliderPositionPercentage,
     vertical,
+
   } = props;
 
   const horizontal = !vertical;
@@ -399,9 +413,11 @@ function ReactCompareImage(props) {
       <div
         style={{
           ...styles.container,
+          ...containerStyle,
           display: allImagesLoaded ? 'block' : 'none',
         }}
         ref={containerRef}
+        className={containerClass}
         data-testid="container"
       >
         <img
@@ -410,6 +426,7 @@ function ReactCompareImage(props) {
           data-testid="right-image"
           ref={rightImageRef}
           src={rightImage}
+          srcSet={rightImageSrcSet}
           style={styles.rightImage}
         />
         <img
@@ -418,6 +435,7 @@ function ReactCompareImage(props) {
           data-testid="left-image"
           ref={leftImageRef}
           src={leftImage}
+          srcSet={leftImageSrcSet}
           style={styles.leftImage}
         />
         <div style={styles.slider}>

From fb7f90b73a8a7f549d91794615218332b9af147d Mon Sep 17 00:00:00 2001
From: isengartz <kontokostas.thanasis@gmail.com>
Date: Thu, 28 May 2020 23:29:43 +0300
Subject: [PATCH 2/2] Updated README.md

---
 README.md                 | 4 ++++
 src/ReactCompareImage.jsx | 4 +---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9f7dd65..02c8f1f 100644
--- a/README.md
+++ b/README.md
@@ -45,15 +45,19 @@ import ReactCompareImage from 'react-compare-image';
 | handleSize               | number (px)             |     40      | diameter of slider handle (by pixel)                                                                                  |
 | hover                    | boolean                 |    false    | Whether to slide at hover                                                                                             |
 | leftImage \*             | string                  |    null     | left image's url                                                                                                      |
+| leftImageSrcSet          | string                  |    null     | left image's srcset url                                                                                                      |
 | leftImageAlt             | string                  |    `''`     | alt props for left image                                                                                              |
 | leftImageCss             | object                  |     {}      | Additional css for left image                                                                                         |
 | leftImageLabel           | string                  |    null     | Label for the image (e.g. `before`)                                                                                   |
 | onSliderPositionChange   | function                |    null     | Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg           |
 | rightImage \*            | string                  |    null     | right image's url                                                                                                     |
+| rightImageSrcSet         | string                  |    null     | right image's srcset url                                                                                                     |
 | rightImageAlt            | string                  |    `''`     | alt props for right image                                                                                             |
 | rightImageCss            | object                  |     {}      | Additional css for right image                                                                                        |
 | rightImageLabel          | string                  |    null     | Label for the image (e.g. `after`)                                                                                    |
 | skeleton                 | element                 |    null     | Element displayed while image is loading                                                                              |
+| containerStyle           | object                  |    {}       | Container's style                                                                            |
+| containerClass           | string                  |    `''`     | Container's className                                                                            |
 | sliderLineColor          | string                  | `'#ffffff'` | line color of slider                                                                                                  |
 | sliderLineWidth          | number (px)             |      2      | line width of slider (by pixel)                                                                                       |
 | sliderPositionPercentage | number (float)          |     0.5     | Default line position (from 0 to 1)                                                                                   |
diff --git a/src/ReactCompareImage.jsx b/src/ReactCompareImage.jsx
index 88ef6fa..9f9345f 100644
--- a/src/ReactCompareImage.jsx
+++ b/src/ReactCompareImage.jsx
@@ -19,7 +19,7 @@ const propTypes = {
   rightImageCss: PropTypes.object, // eslint-disable-line
   rightImageLabel: PropTypes.string,
   skeleton: PropTypes.element,
-  containerStyle: PropTypes.object,
+  containerStyle: PropTypes.object, // eslint-disable-line
   containerClass: PropTypes.string,
   sliderLineColor: PropTypes.string,
   sliderLineWidth: PropTypes.number,
@@ -48,7 +48,6 @@ const defaultProps = {
   sliderLineWidth: 2,
   sliderPositionPercentage: 0.5,
   vertical: false,
-  
 };
 
 function ReactCompareImage(props) {
@@ -75,7 +74,6 @@ function ReactCompareImage(props) {
     sliderLineWidth,
     sliderPositionPercentage,
     vertical,
-
   } = props;
 
   const horizontal = !vertical;