react-compare-slider - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.d.ts

@@ -1,3 +0,3 @@
-export * from './react-compare-slider-image';
-export * from './react-compare-slider';
-export { styleFitContainer } from './utils';
+export { ReactCompareSlider, ReactCompareSliderProps, ReactCompareSliderHandle, ReactCompareSliderHandleProps, } from './react-compare-slider';
+export { ReactCompareSliderImage, ReactCompareSliderImageProps, } from './react-compare-slider-image';
+export { styleFitContainer, supportsCssObjectFit } from './utils';

dist/react-compare-slider-image.d.ts

 import React from 'react';
 /**
- * Whether client supports the CSS `object-fit` property.
- */
-export declare const CLIENT_SUPPORTS_CSS_OBJECT_FIT: boolean;
-/**
  * Properties for `ReactCompareSliderImage`.
@@ -8,0 +4,0 @@ */

dist/react-compare-slider.cjs.development.js

@@ -45,2 +45,9 @@ 'use strict';
 /**
+ * Whether client supports the CSS `object-fit` property.
+ */
+
+var supportsCssObjectFit = function supportsCssObjectFit() {
+  return typeof CSS !== 'undefined' && CSS.supports && CSS.supports('object-fit', 'cover');
+};
+/**
  * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.)
@@ -99,6 +106,2 @@ * fit their container and maintain their aspect ratio.
 var useEventListener = function useEventListener(eventName, handler, element, handlerOptions) {
-  if (element === void 0) {
-    element = window;
-  }
-
   // Create a ref that stores handler
@@ -158,46 +161,2 @@ var savedHandler = React.useRef(); // Update ref.current value if handler changes.
 
-/**
- * Whether client supports the CSS `object-fit` property.
- */
-
-var CLIENT_SUPPORTS_CSS_OBJECT_FIT = typeof CSS !== 'undefined' && CSS.supports &&
-/*#__PURE__*/
-CSS.supports('object-fit', 'cover');
-/**
- * Image with fallback background for browsers that don't support the
- * `object-fit` CSS property.
- */
-
-var ReactCompareSliderImage = function ReactCompareSliderImage(_ref) {
-  var className = _ref.className,
-      _ref$fallbackEnable = _ref.fallbackEnable,
-      fallbackEnable = _ref$fallbackEnable === void 0 ? true : _ref$fallbackEnable,
-      style = _ref.style,
-      props = _objectWithoutPropertiesLoose(_ref, ["className", "fallbackEnable", "style"]);
-
-  var innerStyle = styleFitContainer(_extends({}, style));
-  var containerStyle = {
-    width: innerStyle.width,
-    height: innerStyle.height
-  }; // Add fallback background props if requested
-
-  if (!CLIENT_SUPPORTS_CSS_OBJECT_FIT && fallbackEnable) {
-    // Set fallback CSS properties, use props from `innerStyle` if defined
-    containerStyle.backgroundImage = innerStyle.backgroundImage || "url(" + props.src + ")";
-    containerStyle.backgroundSize = innerStyle.backgroundSize || 'cover';
-    containerStyle.backgroundPosition = innerStyle.backgroundPosition || 'center'; // Hide inner image
-
-    innerStyle.opacity = 0;
-  }
-
-  return React__default.createElement("div", {
-    className: className,
-    style: containerStyle,
-    "data-rcs": "image-root"
-  }, React__default.createElement("img", Object.assign({}, props, {
-    style: innerStyle,
-    "data-rcs": "image-inner"
-  })));
-};
-
 /** Handle container to control position. */
@@ -293,3 +252,3 @@
   /** Reference to root container. */
-  var containerRef = React.useRef(document.createElement('div'));
+  var containerRef = React.useRef(null);
   /** Previous props positon (tracks user-supplied `position`). */
@@ -359,4 +318,5 @@
       return;
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
+
     var _containerRef$current2 = containerRef.current.getBoundingClientRect(),
@@ -446,15 +406,19 @@ width = _containerRef$current2.width,
 
-  useResizeObserver(containerRef, handleResize);
+  useResizeObserver(containerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('mousedown', handlePointerDown, containerRef.current, {
     capture: true,
     passive: false
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchmove', handlePointerMove, containerRef.current, {
     capture: false,
     passive: true
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchend', handlePointerUp, containerRef.current, {
     capture: false,
     passive: true
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchstart', handlePointerDown, containerRef.current, {
@@ -493,3 +457,41 @@ capture: true,
 
-exports.CLIENT_SUPPORTS_CSS_OBJECT_FIT = CLIENT_SUPPORTS_CSS_OBJECT_FIT;
+/**
+ * Image with fallback background for browsers that don't support the
+ * `object-fit` CSS property.
+ */
+
+var ReactCompareSliderImage = function ReactCompareSliderImage(_ref) {
+  var className = _ref.className,
+      _ref$fallbackEnable = _ref.fallbackEnable,
+      fallbackEnable = _ref$fallbackEnable === void 0 ? true : _ref$fallbackEnable,
+      style = _ref.style,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "fallbackEnable", "style"]);
+
+  /** Runtime support for `object-fit`. Ref based to allow updates after SSR. */
+  var objectFitIsSupported = React.useRef(supportsCssObjectFit());
+  var innerStyle = styleFitContainer(_extends({}, style));
+  var containerStyle = {
+    width: innerStyle.width,
+    height: innerStyle.height
+  }; // Add fallback background props if requested
+
+  if (!objectFitIsSupported && fallbackEnable) {
+    // Set fallback CSS properties, use props from `innerStyle` if defined
+    containerStyle.backgroundImage = innerStyle.backgroundImage || "url(" + props.src + ")";
+    containerStyle.backgroundSize = innerStyle.backgroundSize || 'cover';
+    containerStyle.backgroundPosition = innerStyle.backgroundPosition || 'center'; // Hide inner image
+
+    innerStyle.opacity = 0;
+  }
+
+  return React__default.createElement("div", {
+    className: className,
+    style: containerStyle,
+    "data-rcs": "image-root"
+  }, React__default.createElement("img", Object.assign({}, props, {
+    style: innerStyle,
+    "data-rcs": "image-inner"
+  })));
+};
+
 exports.ReactCompareSlider = ReactCompareSlider;
@@ -499,2 +501,3 @@ exports.ReactCompareSliderHandle = ReactCompareSliderHandle;
 exports.styleFitContainer = styleFitContainer;
+exports.supportsCssObjectFit = supportsCssObjectFit;
 //# sourceMappingURL=react-compare-slider.cjs.development.js.map

dist/react-compare-slider.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},s=function(e){var n=t.useRef(),r=t.useRef();return r.current!==e&&(n.current=r.current,r.current=e),n.current},c=function(e,n,r,o){void 0===r&&(r=window);var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},u="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("object-fit","cover"),l=function(e){var t=e.position,r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:r?"translateY("+t+"px)":"translateX("+t+"px)",pointerEvents:"none"},"data-rcs":"main-handle-container"},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},d=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?3:"100%",width:t?"100%":3,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"main-handle-inner"}))},f=function(e){var t=e.portrait,r=e.position,o=i(e,["portrait","position"]);return n.createElement("div",Object.assign({},o,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",clip:t?"rect(auto,auto,"+r+"px,auto)":"rect(auto,"+r+"px,auto,auto)",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item"}))};exports.CLIENT_SUPPORTS_CSS_OBJECT_FIT=u,exports.ReactCompareSlider=function(e){var a=e.handle,u=e.itemOne,p=e.itemTwo,v=e.onPositionChange,h=e.portrait,m=e.position,g=void 0===m?50:m,b=e.style,w=i(e,["handle","itemOne","itemTwo","onPositionChange","portrait","position","style"]),E=t.useRef(document.createElement("div")),y=s(g),S=s(h),C=t.useRef(g),x=t.useState(0),k=x[0],O=x[1],j=t.useState(!1),R=j[0],L=j[1],P=t.useRef(!1),z=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=E.current.getBoundingClientRect(),i=o.width,a=o.height;if(0!==i&&0!==a){var s=h?r?n-o.top-window.pageYOffset:n:r?t-o.left-window.pageXOffset:t;s<0?s=0:h&&s>a?s=a:!h&&s>i&&(s=i),C.current=Math.min(Math.max(s/(h?a:i)*100,0),100),O(s),v&&v(C.current)}}),[v,h]);t.useEffect((function(){if(y!==g&&y!==h){var e=E.current.getBoundingClientRect(),t=e.width,n=e.height;z(S===h?{x:t/100*g,y:n/100*g}:{x:t/100*C.current,y:n/100*C.current})}}),[h,g,S,y,z]);var M,U,X,Y,F,T=t.useCallback((function(e){e.preventDefault(),z({isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),L(!0)}),[z]),_=t.useCallback((function(e){R&&requestAnimationFrame((function(){z({isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}))}),[R,z]),I=t.useCallback((function(){L(!1)}),[]),N=t.useCallback((function(e){z({x:e.width/100*C.current,y:e.height/100*C.current})}),[z]);t.useEffect((function(){return R&&!P.current&&(window.addEventListener("mousemove",_,{passive:!0}),window.addEventListener("mouseup",I,{passive:!0}),window.addEventListener("touchmove",_,{passive:!0}),window.addEventListener("touchend",I,{passive:!0}),P.current=!0),function(){P.current&&(window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",I),P.current=!1)}}),[_,I,R]),M=E,U=N,X=t.useRef(new r.ResizeObserver((function(e){U&&U(e[0].contentRect)}))),Y=t.useCallback((function(){var e=X.current;e&&e.disconnect()}),[]),F=t.useCallback((function(){M.current&&X.current.observe(M.current)}),[M]),t.useLayoutEffect((function(){return F(),function(){return Y()}}),[Y,F]),c("mousedown",T,E.current,{capture:!0,passive:!1}),c("touchmove",_,E.current,{capture:!1,passive:!0}),c("touchend",I,E.current,{capture:!1,passive:!0}),c("touchstart",T,E.current,{capture:!0,passive:!1});var q=a||n.createElement(d,{portrait:h}),B=o({position:"relative",overflow:"hidden",cursor:R?h?"ns-resize":"ew-resize":void 0,touchAction:h?"pan-x":"pan-y",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},b);return n.createElement("div",Object.assign({},w,{ref:E,style:B,"data-rcs":"root"}),p,n.createElement(f,{position:k,portrait:h},u),n.createElement(l,{position:k,portrait:h},q))},exports.ReactCompareSliderHandle=d,exports.ReactCompareSliderImage=function(e){var t=e.className,r=e.fallbackEnable,s=void 0===r||r,c=e.style,l=i(e,["className","fallbackEnable","style"]),d=a(o({},c)),f={width:d.width,height:d.height};return!u&&s&&(f.backgroundImage=d.backgroundImage||"url("+l.src+")",f.backgroundSize=d.backgroundSize||"cover",f.backgroundPosition=d.backgroundPosition||"center",d.opacity=0),n.createElement("div",{className:t,style:f,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:d,"data-rcs":"image-inner"})))},exports.styleFitContainer=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=function(){return"undefined"!=typeof CSS&&CSS.supports&&CSS.supports("object-fit","cover")},s=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},c=function(e){var n=t.useRef(),r=t.useRef();return r.current!==e&&(n.current=r.current,r.current=e),n.current},u=function(e,n,r,o){var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},l=function(e){var t=e.position,r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:r?"translateY("+t+"px)":"translateX("+t+"px)",pointerEvents:"none"},"data-rcs":"main-handle-container"},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?3:"100%",width:t?"100%":3,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"main-handle-inner"}))},p=function(e){var t=e.portrait,r=e.position,o=i(e,["portrait","position"]);return n.createElement("div",Object.assign({},o,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",clip:t?"rect(auto,auto,"+r+"px,auto)":"rect(auto,"+r+"px,auto,auto)",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item"}))};exports.ReactCompareSlider=function(e){var a=e.handle,s=e.itemOne,d=e.itemTwo,v=e.onPositionChange,h=e.portrait,m=e.position,g=void 0===m?50:m,b=e.style,w=i(e,["handle","itemOne","itemTwo","onPositionChange","portrait","position","style"]),E=t.useRef(null),y=c(g),S=c(h),x=t.useRef(g),C=t.useState(0),k=C[0],O=C[1],j=t.useState(!1),R=j[0],z=j[1],L=t.useRef(!1),M=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=E.current.getBoundingClientRect(),i=o.width,a=o.height;if(0!==i&&0!==a){var s=h?r?n-o.top-window.pageYOffset:n:r?t-o.left-window.pageXOffset:t;s<0?s=0:h&&s>a?s=a:!h&&s>i&&(s=i),x.current=Math.min(Math.max(s/(h?a:i)*100,0),100),O(s),v&&v(x.current)}}),[v,h]);t.useEffect((function(){if(y!==g&&y!==h){var e=E.current.getBoundingClientRect(),t=e.width,n=e.height;M(S===h?{x:t/100*g,y:n/100*g}:{x:t/100*x.current,y:n/100*x.current})}}),[h,g,S,y,M]);var P,X,Y,F,U,q=t.useCallback((function(e){e.preventDefault(),M({isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),z(!0)}),[M]),I=t.useCallback((function(e){R&&requestAnimationFrame((function(){M({isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}))}),[R,M]),N=t.useCallback((function(){z(!1)}),[]),W=t.useCallback((function(e){M({x:e.width/100*x.current,y:e.height/100*x.current})}),[M]);t.useEffect((function(){return R&&!L.current&&(window.addEventListener("mousemove",I,{passive:!0}),window.addEventListener("mouseup",N,{passive:!0}),window.addEventListener("touchmove",I,{passive:!0}),window.addEventListener("touchend",N,{passive:!0}),L.current=!0),function(){L.current&&(window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",N),L.current=!1)}}),[I,N,R]),P=E,X=W,Y=t.useRef(new r.ResizeObserver((function(e){X&&X(e[0].contentRect)}))),F=t.useCallback((function(){var e=Y.current;e&&e.disconnect()}),[]),U=t.useCallback((function(){P.current&&Y.current.observe(P.current)}),[P]),t.useLayoutEffect((function(){return U(),function(){return F()}}),[F,U]),u("mousedown",q,E.current,{capture:!0,passive:!1}),u("touchmove",I,E.current,{capture:!1,passive:!0}),u("touchend",N,E.current,{capture:!1,passive:!0}),u("touchstart",q,E.current,{capture:!0,passive:!1});var A=a||n.createElement(f,{portrait:h}),B=o({position:"relative",overflow:"hidden",cursor:R?h?"ns-resize":"ew-resize":void 0,touchAction:h?"pan-x":"pan-y",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},b);return n.createElement("div",Object.assign({},w,{ref:E,style:B,"data-rcs":"root"}),d,n.createElement(p,{position:k,portrait:h},s),n.createElement(l,{position:k,portrait:h},A))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,c=e.fallbackEnable,u=void 0===c||c,l=e.style,f=i(e,["className","fallbackEnable","style"]),p=t.useRef(a()),d=s(o({},l)),v={width:d.width,height:d.height};return!p&&u&&(v.backgroundImage=d.backgroundImage||"url("+f.src+")",v.backgroundSize=d.backgroundSize||"cover",v.backgroundPosition=d.backgroundPosition||"center",d.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},f,{style:d,"data-rcs":"image-inner"})))},exports.styleFitContainer=s,exports.supportsCssObjectFit=a;
 //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

dist/react-compare-slider.esm.js

@@ -38,2 +38,9 @@ import React, { useRef, useEffect, useCallback, useLayoutEffect, useState } from 'react';
 /**
+ * Whether client supports the CSS `object-fit` property.
+ */
+
+var supportsCssObjectFit = function supportsCssObjectFit() {
+  return typeof CSS !== 'undefined' && CSS.supports && CSS.supports('object-fit', 'cover');
+};
+/**
  * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.)
@@ -92,6 +99,2 @@ * fit their container and maintain their aspect ratio.
 var useEventListener = function useEventListener(eventName, handler, element, handlerOptions) {
-  if (element === void 0) {
-    element = window;
-  }
-
   // Create a ref that stores handler
@@ -151,46 +154,2 @@ var savedHandler = useRef(); // Update ref.current value if handler changes.
 
-/**
- * Whether client supports the CSS `object-fit` property.
- */
-
-var CLIENT_SUPPORTS_CSS_OBJECT_FIT = typeof CSS !== 'undefined' && CSS.supports &&
-/*#__PURE__*/
-CSS.supports('object-fit', 'cover');
-/**
- * Image with fallback background for browsers that don't support the
- * `object-fit` CSS property.
- */
-
-var ReactCompareSliderImage = function ReactCompareSliderImage(_ref) {
-  var className = _ref.className,
-      _ref$fallbackEnable = _ref.fallbackEnable,
-      fallbackEnable = _ref$fallbackEnable === void 0 ? true : _ref$fallbackEnable,
-      style = _ref.style,
-      props = _objectWithoutPropertiesLoose(_ref, ["className", "fallbackEnable", "style"]);
-
-  var innerStyle = styleFitContainer(_extends({}, style));
-  var containerStyle = {
-    width: innerStyle.width,
-    height: innerStyle.height
-  }; // Add fallback background props if requested
-
-  if (!CLIENT_SUPPORTS_CSS_OBJECT_FIT && fallbackEnable) {
-    // Set fallback CSS properties, use props from `innerStyle` if defined
-    containerStyle.backgroundImage = innerStyle.backgroundImage || "url(" + props.src + ")";
-    containerStyle.backgroundSize = innerStyle.backgroundSize || 'cover';
-    containerStyle.backgroundPosition = innerStyle.backgroundPosition || 'center'; // Hide inner image
-
-    innerStyle.opacity = 0;
-  }
-
-  return React.createElement("div", {
-    className: className,
-    style: containerStyle,
-    "data-rcs": "image-root"
-  }, React.createElement("img", Object.assign({}, props, {
-    style: innerStyle,
-    "data-rcs": "image-inner"
-  })));
-};
-
 /** Handle container to control position. */
@@ -286,3 +245,3 @@
   /** Reference to root container. */
-  var containerRef = useRef(document.createElement('div'));
+  var containerRef = useRef(null);
   /** Previous props positon (tracks user-supplied `position`). */
@@ -352,4 +311,5 @@
       return;
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
+
     var _containerRef$current2 = containerRef.current.getBoundingClientRect(),
@@ -439,15 +399,19 @@ width = _containerRef$current2.width,
 
-  useResizeObserver(containerRef, handleResize);
+  useResizeObserver(containerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('mousedown', handlePointerDown, containerRef.current, {
     capture: true,
     passive: false
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchmove', handlePointerMove, containerRef.current, {
     capture: false,
     passive: true
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchend', handlePointerUp, containerRef.current, {
     capture: false,
     passive: true
-  });
+  }); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useEventListener('touchstart', handlePointerDown, containerRef.current, {
@@ -486,3 +450,42 @@ capture: true,
 
-export { CLIENT_SUPPORTS_CSS_OBJECT_FIT, ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer };
+/**
+ * Image with fallback background for browsers that don't support the
+ * `object-fit` CSS property.
+ */
+
+var ReactCompareSliderImage = function ReactCompareSliderImage(_ref) {
+  var className = _ref.className,
+      _ref$fallbackEnable = _ref.fallbackEnable,
+      fallbackEnable = _ref$fallbackEnable === void 0 ? true : _ref$fallbackEnable,
+      style = _ref.style,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "fallbackEnable", "style"]);
+
+  /** Runtime support for `object-fit`. Ref based to allow updates after SSR. */
+  var objectFitIsSupported = useRef(supportsCssObjectFit());
+  var innerStyle = styleFitContainer(_extends({}, style));
+  var containerStyle = {
+    width: innerStyle.width,
+    height: innerStyle.height
+  }; // Add fallback background props if requested
+
+  if (!objectFitIsSupported && fallbackEnable) {
+    // Set fallback CSS properties, use props from `innerStyle` if defined
+    containerStyle.backgroundImage = innerStyle.backgroundImage || "url(" + props.src + ")";
+    containerStyle.backgroundSize = innerStyle.backgroundSize || 'cover';
+    containerStyle.backgroundPosition = innerStyle.backgroundPosition || 'center'; // Hide inner image
+
+    innerStyle.opacity = 0;
+  }
+
+  return React.createElement("div", {
+    className: className,
+    style: containerStyle,
+    "data-rcs": "image-root"
+  }, React.createElement("img", Object.assign({}, props, {
+    style: innerStyle,
+    "data-rcs": "image-inner"
+  })));
+};
+
+export { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer, supportsCssObjectFit };
 //# sourceMappingURL=react-compare-slider.esm.js.map

dist/utils.d.ts

 import { RefObject } from 'react';
 import { ContentRect } from 'resize-observer/lib/ContentRect';
 /**
+ * Whether client supports the CSS `object-fit` property.
+ */
+export declare const supportsCssObjectFit: () => boolean;
+/**
  * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.)
@@ -20,3 +24,3 @@ * fit their container and maintain their aspect ratio.
  */
-export declare const useEventListener: (eventName: string, handler: Function, element: EventTarget | undefined, handlerOptions: AddEventListenerOptions) => void;
+export declare const useEventListener: (eventName: string, handler: Function, element: EventTarget, handlerOptions: AddEventListenerOptions) => void;
 /** Params passed to `useResizeObserver` `handler` function. */
@@ -23,0 +27,0 @@ export declare type UseResizeObserverHandlerParams = ContentRect;

package.json

 {
   "name": "react-compare-slider",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
@@ -73,34 +73,34 @@ "repository": {
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-docs": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/addon-viewport": "^5.3.17",
-    "@storybook/addons": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-storysource": "^5.3.18",
+    "@storybook/addon-viewport": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
     "@storybook/preset-typescript": "1.2.2",
-    "@storybook/react": "^5.3.17",
-    "@storybook/theming": "^5.3.17",
-    "@testing-library/react": "^10.0.1",
-    "@types/jest": "^25.1.4",
+    "@storybook/react": "^5.3.18",
+    "@storybook/theming": "^5.3.18",
+    "@testing-library/react": "^10.0.2",
+    "@types/jest": "^25.2.1",
     "@types/node": "^12.12.26",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.23.0",
-    "babel-loader": "^8.0.6",
+    "@types/react": "^16.9.32",
+    "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
+    "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "husky": "^4.2.3",
-    "lint-staged": "^10.0.8",
+    "lint-staged": "^10.1.2",
     "np": "^6.2.0",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
-    "react": "^16.13.0",
-    "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^16.13.0",
-    "ts-loader": "^6.2.1",
-    "tsdx": "^0.12.3",
+    "react": "^16.13.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^16.13.1",
+    "ts-loader": "^6.2.2",
+    "tsdx": "^0.13.1",
     "tslib": "^1.11.1",
@@ -107,0 +107,0 @@ "typescript": "^3.8.3"

README.md

@@ -69,3 +69,3 @@ <div align="center">
 
-See the [Image Playground](https://react-compare-slider.netlify.app/?path=/docs/demos-images--playground)
+See the [Image Playground](https://react-compare-slider.netlify.app/?path=/story/demos-images--playground)
 to experiment with images using the "Knobs" tab.
@@ -72,0 +72,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

132691

increased by4.49%

Worsened metrics

Lines of code

932

decreased by-0.21%

No dependency changes