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 d385aff..9f9345f 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, // eslint-disable-line + containerClass: PropTypes.string, sliderLineColor: PropTypes.string, sliderLineWidth: PropTypes.number, sliderPositionPercentage: PropTypes.number, @@ -28,14 +32,18 @@ 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, @@ -49,15 +57,19 @@ function ReactCompareImage(props) { handleSize, hover, leftImage, + leftImageSrcSet, leftImageAlt, leftImageCss, leftImageLabel, onSliderPositionChange, rightImage, + rightImageSrcSet, rightImageAlt, rightImageCss, rightImageLabel, skeleton, + containerStyle, + containerClass, sliderLineColor, sliderLineWidth, sliderPositionPercentage, @@ -399,9 +411,11 @@ function ReactCompareImage(props) {