Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-compare-slider
Advanced tools
react-compare-slider - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
@@ -159,5 +159,4 @@ 'use strict'; | ||
| var ReactCompareSliderHandleContainer = function ReactCompareSliderHandleContainer(_ref) { | ||
| var ReactCompareSliderHandleContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) { | ||
| var children = _ref.children, | ||
| position = _ref.position, | ||
| portrait = _ref.portrait; | ||
@@ -169,4 +168,2 @@ var style = { | ||
| height: '100%', | ||
| transform: portrait ? "translateY(" + position + "px)" : "translateX(" + position + "px)", | ||
| // Only want inner handle to be selectable. | ||
| pointerEvents: 'none' | ||
@@ -183,10 +180,11 @@ }; | ||
| style: style, | ||
| "data-rcs": "main-handle-container" | ||
| "data-rcs": "handle-container", | ||
| ref: ref | ||
| }, React__default.createElement("div", { | ||
| style: innerStyle | ||
| }, children)); | ||
| }; | ||
| }); | ||
| ReactCompareSliderHandleContainer.displayName = 'ReactCompareSliderHandleContainer'; | ||
| /** Overridable handle. */ | ||
| var ReactCompareSliderHandle = function ReactCompareSliderHandle(_ref2) { | ||
@@ -198,4 +196,4 @@ var portrait = _ref2.portrait, | ||
| var rootStyle = _extends({ | ||
| height: portrait ? 3 : '100%', | ||
| width: portrait ? '100%' : 3, | ||
| height: portrait ? 4 : '100%', | ||
| width: portrait ? '100%' : 4, | ||
| backgroundColor: '#fff', | ||
@@ -208,3 +206,3 @@ boxShadow: '0 0 .2rem #000', | ||
| style: rootStyle, | ||
| "data-rcs": "main-handle-inner" | ||
| "data-rcs": "handle-inner" | ||
| })); | ||
@@ -214,7 +212,3 @@ }; | ||
| var ReactCompareSliderItem = function ReactCompareSliderItem(_ref3) { | ||
| var portrait = _ref3.portrait, | ||
| position = _ref3.position, | ||
| props = _objectWithoutPropertiesLoose(_ref3, ["portrait", "position"]); | ||
| var ReactCompareSliderClipContainer = /*#__PURE__*/React.forwardRef(function (props, ref) { | ||
| var style = { | ||
@@ -226,3 +220,2 @@ position: 'absolute', | ||
| height: '100%', | ||
| clip: portrait ? "rect(auto,auto," + position + "px,auto)" : "rect(auto," + position + "px,auto,auto)", | ||
| willChange: 'clip', | ||
@@ -236,24 +229,33 @@ userSelect: 'none', | ||
| style: style, | ||
| "data-rcs": "clip-item" | ||
| "data-rcs": "clip-item", | ||
| ref: ref | ||
| })); | ||
| }; | ||
| }); | ||
| ReactCompareSliderClipContainer.displayName = 'ReactCompareSliderClipContainer'; | ||
| /** Root Comparison slider. */ | ||
| var ReactCompareSlider = function ReactCompareSlider(_ref3) { | ||
| var handle = _ref3.handle, | ||
| itemOne = _ref3.itemOne, | ||
| itemTwo = _ref3.itemTwo, | ||
| _ref3$onlyHandleDragg = _ref3.onlyHandleDraggable, | ||
| onlyHandleDraggable = _ref3$onlyHandleDragg === void 0 ? false : _ref3$onlyHandleDragg, | ||
| onPositionChange = _ref3.onPositionChange, | ||
| _ref3$portrait = _ref3.portrait, | ||
| portrait = _ref3$portrait === void 0 ? false : _ref3$portrait, | ||
| _ref3$position = _ref3.position, | ||
| position = _ref3$position === void 0 ? 50 : _ref3$position, | ||
| _ref3$boundsPadding = _ref3.boundsPadding, | ||
| boundsPadding = _ref3$boundsPadding === void 0 ? 0 : _ref3$boundsPadding, | ||
| style = _ref3.style, | ||
| props = _objectWithoutPropertiesLoose(_ref3, ["handle", "itemOne", "itemTwo", "onlyHandleDraggable", "onPositionChange", "portrait", "position", "boundsPadding", "style"]); | ||
| var ReactCompareSlider = function ReactCompareSlider(_ref4) { | ||
| var handle = _ref4.handle, | ||
| itemOne = _ref4.itemOne, | ||
| itemTwo = _ref4.itemTwo, | ||
| onPositionChange = _ref4.onPositionChange, | ||
| _ref4$portrait = _ref4.portrait, | ||
| portrait = _ref4$portrait === void 0 ? false : _ref4$portrait, | ||
| _ref4$position = _ref4.position, | ||
| position = _ref4$position === void 0 ? 50 : _ref4$position, | ||
| _ref4$boundsPadding = _ref4.boundsPadding, | ||
| boundsPadding = _ref4$boundsPadding === void 0 ? 0 : _ref4$boundsPadding, | ||
| style = _ref4.style, | ||
| props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "boundsPadding", "style"]); | ||
| /** Reference to root container. */ | ||
| var rootContainerRef = React.useRef(null); | ||
| /** Reference to clip container. */ | ||
| /** Reference to root container. */ | ||
| var containerRef = React.useRef(null); | ||
| var clipContainerRef = React.useRef(null); | ||
| /** Reference to handle container. */ | ||
| var handleContainerRef = React.useRef(null); | ||
| /** Reference to current position as a percentage value. */ | ||
@@ -265,13 +267,7 @@ | ||
| var prevPropPosition = usePrevious(position); | ||
| /** Internal position in pixels. */ | ||
| var _useState = React.useState(0), | ||
| internalPositionPx = _useState[0], | ||
| setInternalPositionPx = _useState[1]; | ||
| /** Whether user is currently dragging. */ | ||
| var _useState2 = React.useState(false), | ||
| isDragging = _useState2[0], | ||
| setIsDragging = _useState2[1]; | ||
| var _useState = React.useState(false), | ||
| isDragging = _useState[0], | ||
| setIsDragging = _useState[1]; | ||
| /** Whether component has a `window` event binding. */ | ||
@@ -281,16 +277,26 @@ | ||
| var hasWindowBinding = React.useRef(false); | ||
| /** Update internal px and pc */ | ||
| /** Target container for pointer events. */ | ||
| var updateInternalPosition = React.useCallback(function updateInternalCall(_ref5) { | ||
| var x = _ref5.x, | ||
| y = _ref5.y, | ||
| isOffset = _ref5.isOffset, | ||
| _portrait = _ref5.portrait, | ||
| _boundsPadding = _ref5.boundsPadding; | ||
| var _useState2 = React.useState(), | ||
| interactiveTarget = _useState2[0], | ||
| setInteractiveTarget = _useState2[1]; // Set target container for pointer events. | ||
| var _containerRef$current = containerRef.current.getBoundingClientRect(), | ||
| top = _containerRef$current.top, | ||
| left = _containerRef$current.left, | ||
| width = _containerRef$current.width, | ||
| height = _containerRef$current.height; // Early out if width or height are zero, can't calculate values | ||
| React.useEffect(function () { | ||
| setInteractiveTarget(onlyHandleDraggable ? handleContainerRef.current : rootContainerRef.current); | ||
| }, [onlyHandleDraggable]); | ||
| /** Update internal position value. */ | ||
| var updateInternalPosition = React.useCallback(function updateInternalCall(_ref4) { | ||
| var x = _ref4.x, | ||
| y = _ref4.y, | ||
| isOffset = _ref4.isOffset, | ||
| _portrait = _ref4.portrait, | ||
| _boundsPadding = _ref4.boundsPadding; | ||
| var _rootContainerRef$cur = rootContainerRef.current.getBoundingClientRect(), | ||
| top = _rootContainerRef$cur.top, | ||
| left = _rootContainerRef$cur.left, | ||
| width = _rootContainerRef$cur.width, | ||
| height = _rootContainerRef$cur.height; // Early out if width or height are zero, can't calculate values | ||
| // from zeros. | ||
@@ -322,7 +328,12 @@ | ||
| internalPositionPc.current = nextInternalPositionPc; // Update internal pixel position capped to min/max bounds. | ||
| internalPositionPc.current = nextInternalPositionPc; | ||
| /** Pixel position clamped to extremities *with* bounds padding. */ | ||
| setInternalPositionPx(Math.min( // Get largest from pixel position *or* bounds padding. | ||
| var clampedPx = Math.min( // Get largest from pixel position *or* bounds padding. | ||
| Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation. | ||
| (_portrait ? height : width) - _boundsPadding)); | ||
| (_portrait ? height : width) - _boundsPadding); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| clipContainerRef.current.style.clip = _portrait ? "rect(auto,auto," + clampedPx + "px,auto)" : "rect(auto," + clampedPx + "px,auto,auto)"; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| handleContainerRef.current.style.transform = _portrait ? "translate3d(0," + clampedPx + "px,0)" : "translate3d(" + clampedPx + "px,0,0)"; | ||
| if (onPositionChange) onPositionChange(internalPositionPc.current); | ||
@@ -333,5 +344,5 @@ }, [onPositionChange]); // Update internal position if `position` prop changes. | ||
| // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| var _containerRef$current2 = containerRef.current.getBoundingClientRect(), | ||
| width = _containerRef$current2.width, | ||
| height = _containerRef$current2.height; // Use current internal position if `position` hasn't changed. | ||
| var _rootContainerRef$cur2 = rootContainerRef.current.getBoundingClientRect(), | ||
| width = _rootContainerRef$cur2.width, | ||
| height = _rootContainerRef$cur2.height; // Use current internal position if `position` hasn't changed. | ||
@@ -379,5 +390,5 @@ | ||
| var handleResize = React.useCallback(function (_ref6) { | ||
| var width = _ref6.width, | ||
| height = _ref6.height; | ||
| var handleResize = React.useCallback(function (_ref5) { | ||
| var width = _ref5.width, | ||
| height = _ref5.height; | ||
| updateInternalPosition({ | ||
@@ -419,5 +430,5 @@ portrait: portrait, | ||
| useResizeObserver(containerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| useResizeObserver(rootContainerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| useEventListener('mousedown', handlePointerDown, containerRef.current, { | ||
| useEventListener('mousedown', handlePointerDown, interactiveTarget, { | ||
| capture: true, | ||
@@ -427,3 +438,3 @@ passive: false | ||
| useEventListener('touchstart', handlePointerDown, containerRef.current, { | ||
| useEventListener('touchstart', handlePointerDown, interactiveTarget, { | ||
| capture: true, | ||
@@ -449,11 +460,10 @@ passive: false | ||
| return React__default.createElement("div", Object.assign({}, props, { | ||
| ref: containerRef, | ||
| ref: rootContainerRef, | ||
| style: rootStyle, | ||
| "data-rcs": "root" | ||
| }), itemTwo, React__default.createElement(ReactCompareSliderItem, { | ||
| position: internalPositionPx, | ||
| portrait: portrait | ||
| }), itemTwo, React__default.createElement(ReactCompareSliderClipContainer, { | ||
| ref: clipContainerRef | ||
| }, itemOne), React__default.createElement(ReactCompareSliderHandleContainer, { | ||
| position: internalPositionPx, | ||
| portrait: portrait | ||
| portrait: portrait, | ||
| ref: handleContainerRef | ||
| }, Handle)); | ||
@@ -460,0 +470,0 @@ }; |
@@ -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=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=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"]))},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])},d=a?t.useLayoutEffect:t.useEffect,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,s,c=e.handle,v=e.itemOne,h=e.itemTwo,m=e.onPositionChange,b=e.portrait,g=void 0!==b&&b,w=e.position,E=void 0===w?50:w,y=e.boundsPadding,S=void 0===y?0:y,x=e.style,C=i(e,["handle","itemOne","itemTwo","onPositionChange","portrait","position","boundsPadding","style"]),k=t.useRef(null),O=t.useRef(E),j=(s=t.useRef(a=E),t.useEffect((function(){s.current=a})),s.current),P=t.useState(0),R=P[0],L=P[1],z=t.useState(!1),M=z[0],U=z[1],X=t.useRef(!1),Y=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=e.boundsPadding,a=k.current.getBoundingClientRect(),s=a.width,c=a.height;if(0!==s&&0!==c){var u=Math.min(Math.max(o?r?n-a.top-window.pageYOffset:n:r?t-a.left-window.pageXOffset:t,0),o?c:s),d=u/(o?c:s)*100;d===O.current&&(0===O.current||100===O.current)&&(o?0===u||u===c:0===u||u===s)||(O.current=d,L(Math.min(Math.max(u,0+i),(o?c:s)-i)),m&&m(O.current))}}),[m]);t.useEffect((function(){var e=k.current.getBoundingClientRect(),t=E===j?O.current:E;Y({portrait:g,boundsPadding:S,x:e.width/100*t,y:e.height/100*t})}),[g,E,j,S,Y]);var F=t.useCallback((function(e){e.preventDefault(),Y({portrait:g,boundsPadding:S,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),U(!0)}),[g,S,Y]),I=t.useCallback((function(e){M&&Y({portrait:g,boundsPadding:S,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[g,M,S,Y]),N=t.useCallback((function(){U(!1)}),[]),W=t.useCallback((function(e){Y({portrait:g,boundsPadding:S,x:e.width/100*O.current,y:e.height/100*O.current})}),[g,S,Y]);t.useEffect((function(){return M&&!X.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}),X.current=!0),function(){X.current&&(window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",N),window.removeEventListener("touchmove",I),window.removeEventListener("touchend",N),X.current=!1)}}),[I,N,M]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){n(e[0].contentRect)}))),i=t.useCallback((function(){o.current.disconnect()}),[]),a=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);d((function(){return a(),function(){return i()}}),[i,a])}(k,W),u("mousedown",F,k.current,{capture:!0,passive:!1}),u("touchstart",F,k.current,{capture:!0,passive:!1});var q=c||n.createElement(f,{portrait:g}),B=o({position:"relative",overflow:"hidden",cursor:M?g?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},x);return n.createElement("div",Object.assign({},C,{ref:k,style:B,"data-rcs":"root"}),h,n.createElement(p,{position:R,portrait:g},v),n.createElement(l,{position:R,portrait:g},q))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,d=e.style,l=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},d)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+l.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s; | ||
| "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=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=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"]))},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])},d=a?t.useLayoutEffect:t.useEffect,l=t.forwardRef((function(e,t){var r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",pointerEvents:"none"},"data-rcs":"handle-container",ref:t},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))}));l.displayName="ReactCompareSliderHandleContainer";var f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?4:"100%",width:t?"100%":4,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":"handle-inner"}))},p=t.forwardRef((function(e,t){return n.createElement("div",Object.assign({},e,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item",ref:t}))}));p.displayName="ReactCompareSliderClipContainer",exports.ReactCompareSlider=function(e){var a,s,c=e.handle,v=e.itemOne,h=e.itemTwo,g=e.onlyHandleDraggable,m=void 0!==g&&g,b=e.onPositionChange,w=e.portrait,E=void 0!==w&&w,y=e.position,C=void 0===y?50:y,S=e.boundsPadding,x=void 0===S?0:S,k=e.style,R=i(e,["handle","itemOne","itemTwo","onlyHandleDraggable","onPositionChange","portrait","position","boundsPadding","style"]),O=t.useRef(null),j=t.useRef(null),P=t.useRef(null),L=t.useRef(C),z=(s=t.useRef(a=C),t.useEffect((function(){s.current=a})),s.current),M=t.useState(!1),U=M[0],X=M[1],Y=t.useRef(!1),F=t.useState(),N=F[0],H=F[1];t.useEffect((function(){H(m?P.current:O.current)}),[m]);var D=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=e.boundsPadding,a=O.current.getBoundingClientRect(),s=a.width,c=a.height;if(0!==s&&0!==c){var u=Math.min(Math.max(o?r?n-a.top-window.pageYOffset:n:r?t-a.left-window.pageXOffset:t,0),o?c:s),d=u/(o?c:s)*100;if(d!==L.current||0!==L.current&&100!==L.current||!(o?0===u||u===c:0===u||u===s)){L.current=d;var l=Math.min(Math.max(u,0+i),(o?c:s)-i);j.current.style.clip=o?"rect(auto,auto,"+l+"px,auto)":"rect(auto,"+l+"px,auto,auto)",P.current.style.transform=o?"translate3d(0,"+l+"px,0)":"translate3d("+l+"px,0,0)",b&&b(L.current)}}}),[b]);t.useEffect((function(){var e=O.current.getBoundingClientRect(),t=C===z?L.current:C;D({portrait:E,boundsPadding:x,x:e.width/100*t,y:e.height/100*t})}),[E,C,z,x,D]);var I=t.useCallback((function(e){e.preventDefault(),D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),X(!0)}),[E,x,D]),W=t.useCallback((function(e){U&&D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[E,U,x,D]),q=t.useCallback((function(){X(!1)}),[]),B=t.useCallback((function(e){D({portrait:E,boundsPadding:x,x:e.width/100*L.current,y:e.height/100*L.current})}),[E,x,D]);t.useEffect((function(){return U&&!Y.current&&(window.addEventListener("mousemove",W,{passive:!0}),window.addEventListener("mouseup",q,{passive:!0}),window.addEventListener("touchmove",W,{passive:!0}),window.addEventListener("touchend",q,{passive:!0}),Y.current=!0),function(){Y.current&&(window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",q),window.removeEventListener("touchmove",W),window.removeEventListener("touchend",q),Y.current=!1)}}),[W,q,U]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){n(e[0].contentRect)}))),i=t.useCallback((function(){o.current.disconnect()}),[]),a=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);d((function(){return a(),function(){return i()}}),[i,a])}(O,B),u("mousedown",I,N,{capture:!0,passive:!1}),u("touchstart",I,N,{capture:!0,passive:!1});var K=c||n.createElement(f,{portrait:E}),T=o({position:"relative",overflow:"hidden",cursor:U?E?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},k);return n.createElement("div",Object.assign({},R,{ref:O,style:T,"data-rcs":"root"}),h,n.createElement(p,{ref:j},v),n.createElement(l,{portrait:E,ref:P},K))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,d=e.style,l=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},d)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+l.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s; | ||
| //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map |
@@ -19,3 +19,3 @@ import React from 'react'; | ||
| /** Comparison slider properties. */ | ||
| export interface ReactCompareSliderProps extends Omit<ReactCompareSliderCommonProps, 'position'> { | ||
| export interface ReactCompareSliderProps extends Partial<ReactCompareSliderCommonProps> { | ||
| /** Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). */ | ||
@@ -29,5 +29,5 @@ boundsPadding?: number; | ||
| itemTwo: React.ReactNode; | ||
| /** Custom divider position. */ | ||
| position?: ReactCompareSliderCommonProps['position']; | ||
| /** Callback on position change. */ | ||
| /** Whether to only change position when handle is interacted with (useful for touch devices). */ | ||
| onlyHandleDraggable?: boolean; | ||
| /** Callback on position change with position as percentage. */ | ||
| onPositionChange?: (position: ReactCompareSliderPropPosition) => void; | ||
@@ -34,0 +34,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| import React, { useRef, useEffect, useCallback, useLayoutEffect, useState } from 'react'; | ||
| import React, { useRef, useEffect, useCallback, useLayoutEffect, useState, forwardRef } from 'react'; | ||
| import { ResizeObserver } from 'resize-observer'; | ||
@@ -152,5 +152,4 @@ | ||
| var ReactCompareSliderHandleContainer = function ReactCompareSliderHandleContainer(_ref) { | ||
| var ReactCompareSliderHandleContainer = /*#__PURE__*/forwardRef(function (_ref, ref) { | ||
| var children = _ref.children, | ||
| position = _ref.position, | ||
| portrait = _ref.portrait; | ||
@@ -162,4 +161,2 @@ var style = { | ||
| height: '100%', | ||
| transform: portrait ? "translateY(" + position + "px)" : "translateX(" + position + "px)", | ||
| // Only want inner handle to be selectable. | ||
| pointerEvents: 'none' | ||
@@ -176,10 +173,11 @@ }; | ||
| style: style, | ||
| "data-rcs": "main-handle-container" | ||
| "data-rcs": "handle-container", | ||
| ref: ref | ||
| }, React.createElement("div", { | ||
| style: innerStyle | ||
| }, children)); | ||
| }; | ||
| }); | ||
| ReactCompareSliderHandleContainer.displayName = 'ReactCompareSliderHandleContainer'; | ||
| /** Overridable handle. */ | ||
| var ReactCompareSliderHandle = function ReactCompareSliderHandle(_ref2) { | ||
@@ -191,4 +189,4 @@ var portrait = _ref2.portrait, | ||
| var rootStyle = _extends({ | ||
| height: portrait ? 3 : '100%', | ||
| width: portrait ? '100%' : 3, | ||
| height: portrait ? 4 : '100%', | ||
| width: portrait ? '100%' : 4, | ||
| backgroundColor: '#fff', | ||
@@ -201,3 +199,3 @@ boxShadow: '0 0 .2rem #000', | ||
| style: rootStyle, | ||
| "data-rcs": "main-handle-inner" | ||
| "data-rcs": "handle-inner" | ||
| })); | ||
@@ -207,7 +205,3 @@ }; | ||
| var ReactCompareSliderItem = function ReactCompareSliderItem(_ref3) { | ||
| var portrait = _ref3.portrait, | ||
| position = _ref3.position, | ||
| props = _objectWithoutPropertiesLoose(_ref3, ["portrait", "position"]); | ||
| var ReactCompareSliderClipContainer = /*#__PURE__*/forwardRef(function (props, ref) { | ||
| var style = { | ||
@@ -219,3 +213,2 @@ position: 'absolute', | ||
| height: '100%', | ||
| clip: portrait ? "rect(auto,auto," + position + "px,auto)" : "rect(auto," + position + "px,auto,auto)", | ||
| willChange: 'clip', | ||
@@ -229,24 +222,33 @@ userSelect: 'none', | ||
| style: style, | ||
| "data-rcs": "clip-item" | ||
| "data-rcs": "clip-item", | ||
| ref: ref | ||
| })); | ||
| }; | ||
| }); | ||
| ReactCompareSliderClipContainer.displayName = 'ReactCompareSliderClipContainer'; | ||
| /** Root Comparison slider. */ | ||
| var ReactCompareSlider = function ReactCompareSlider(_ref3) { | ||
| var handle = _ref3.handle, | ||
| itemOne = _ref3.itemOne, | ||
| itemTwo = _ref3.itemTwo, | ||
| _ref3$onlyHandleDragg = _ref3.onlyHandleDraggable, | ||
| onlyHandleDraggable = _ref3$onlyHandleDragg === void 0 ? false : _ref3$onlyHandleDragg, | ||
| onPositionChange = _ref3.onPositionChange, | ||
| _ref3$portrait = _ref3.portrait, | ||
| portrait = _ref3$portrait === void 0 ? false : _ref3$portrait, | ||
| _ref3$position = _ref3.position, | ||
| position = _ref3$position === void 0 ? 50 : _ref3$position, | ||
| _ref3$boundsPadding = _ref3.boundsPadding, | ||
| boundsPadding = _ref3$boundsPadding === void 0 ? 0 : _ref3$boundsPadding, | ||
| style = _ref3.style, | ||
| props = _objectWithoutPropertiesLoose(_ref3, ["handle", "itemOne", "itemTwo", "onlyHandleDraggable", "onPositionChange", "portrait", "position", "boundsPadding", "style"]); | ||
| var ReactCompareSlider = function ReactCompareSlider(_ref4) { | ||
| var handle = _ref4.handle, | ||
| itemOne = _ref4.itemOne, | ||
| itemTwo = _ref4.itemTwo, | ||
| onPositionChange = _ref4.onPositionChange, | ||
| _ref4$portrait = _ref4.portrait, | ||
| portrait = _ref4$portrait === void 0 ? false : _ref4$portrait, | ||
| _ref4$position = _ref4.position, | ||
| position = _ref4$position === void 0 ? 50 : _ref4$position, | ||
| _ref4$boundsPadding = _ref4.boundsPadding, | ||
| boundsPadding = _ref4$boundsPadding === void 0 ? 0 : _ref4$boundsPadding, | ||
| style = _ref4.style, | ||
| props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "boundsPadding", "style"]); | ||
| /** Reference to root container. */ | ||
| var rootContainerRef = useRef(null); | ||
| /** Reference to clip container. */ | ||
| /** Reference to root container. */ | ||
| var containerRef = useRef(null); | ||
| var clipContainerRef = useRef(null); | ||
| /** Reference to handle container. */ | ||
| var handleContainerRef = useRef(null); | ||
| /** Reference to current position as a percentage value. */ | ||
@@ -258,13 +260,7 @@ | ||
| var prevPropPosition = usePrevious(position); | ||
| /** Internal position in pixels. */ | ||
| var _useState = useState(0), | ||
| internalPositionPx = _useState[0], | ||
| setInternalPositionPx = _useState[1]; | ||
| /** Whether user is currently dragging. */ | ||
| var _useState2 = useState(false), | ||
| isDragging = _useState2[0], | ||
| setIsDragging = _useState2[1]; | ||
| var _useState = useState(false), | ||
| isDragging = _useState[0], | ||
| setIsDragging = _useState[1]; | ||
| /** Whether component has a `window` event binding. */ | ||
@@ -274,16 +270,26 @@ | ||
| var hasWindowBinding = useRef(false); | ||
| /** Update internal px and pc */ | ||
| /** Target container for pointer events. */ | ||
| var updateInternalPosition = useCallback(function updateInternalCall(_ref5) { | ||
| var x = _ref5.x, | ||
| y = _ref5.y, | ||
| isOffset = _ref5.isOffset, | ||
| _portrait = _ref5.portrait, | ||
| _boundsPadding = _ref5.boundsPadding; | ||
| var _useState2 = useState(), | ||
| interactiveTarget = _useState2[0], | ||
| setInteractiveTarget = _useState2[1]; // Set target container for pointer events. | ||
| var _containerRef$current = containerRef.current.getBoundingClientRect(), | ||
| top = _containerRef$current.top, | ||
| left = _containerRef$current.left, | ||
| width = _containerRef$current.width, | ||
| height = _containerRef$current.height; // Early out if width or height are zero, can't calculate values | ||
| useEffect(function () { | ||
| setInteractiveTarget(onlyHandleDraggable ? handleContainerRef.current : rootContainerRef.current); | ||
| }, [onlyHandleDraggable]); | ||
| /** Update internal position value. */ | ||
| var updateInternalPosition = useCallback(function updateInternalCall(_ref4) { | ||
| var x = _ref4.x, | ||
| y = _ref4.y, | ||
| isOffset = _ref4.isOffset, | ||
| _portrait = _ref4.portrait, | ||
| _boundsPadding = _ref4.boundsPadding; | ||
| var _rootContainerRef$cur = rootContainerRef.current.getBoundingClientRect(), | ||
| top = _rootContainerRef$cur.top, | ||
| left = _rootContainerRef$cur.left, | ||
| width = _rootContainerRef$cur.width, | ||
| height = _rootContainerRef$cur.height; // Early out if width or height are zero, can't calculate values | ||
| // from zeros. | ||
@@ -315,7 +321,12 @@ | ||
| internalPositionPc.current = nextInternalPositionPc; // Update internal pixel position capped to min/max bounds. | ||
| internalPositionPc.current = nextInternalPositionPc; | ||
| /** Pixel position clamped to extremities *with* bounds padding. */ | ||
| setInternalPositionPx(Math.min( // Get largest from pixel position *or* bounds padding. | ||
| var clampedPx = Math.min( // Get largest from pixel position *or* bounds padding. | ||
| Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation. | ||
| (_portrait ? height : width) - _boundsPadding)); | ||
| (_portrait ? height : width) - _boundsPadding); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| clipContainerRef.current.style.clip = _portrait ? "rect(auto,auto," + clampedPx + "px,auto)" : "rect(auto," + clampedPx + "px,auto,auto)"; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| handleContainerRef.current.style.transform = _portrait ? "translate3d(0," + clampedPx + "px,0)" : "translate3d(" + clampedPx + "px,0,0)"; | ||
| if (onPositionChange) onPositionChange(internalPositionPc.current); | ||
@@ -326,5 +337,5 @@ }, [onPositionChange]); // Update internal position if `position` prop changes. | ||
| // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| var _containerRef$current2 = containerRef.current.getBoundingClientRect(), | ||
| width = _containerRef$current2.width, | ||
| height = _containerRef$current2.height; // Use current internal position if `position` hasn't changed. | ||
| var _rootContainerRef$cur2 = rootContainerRef.current.getBoundingClientRect(), | ||
| width = _rootContainerRef$cur2.width, | ||
| height = _rootContainerRef$cur2.height; // Use current internal position if `position` hasn't changed. | ||
@@ -372,5 +383,5 @@ | ||
| var handleResize = useCallback(function (_ref6) { | ||
| var width = _ref6.width, | ||
| height = _ref6.height; | ||
| var handleResize = useCallback(function (_ref5) { | ||
| var width = _ref5.width, | ||
| height = _ref5.height; | ||
| updateInternalPosition({ | ||
@@ -412,5 +423,5 @@ portrait: portrait, | ||
| useResizeObserver(containerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| useResizeObserver(rootContainerRef, handleResize); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| useEventListener('mousedown', handlePointerDown, containerRef.current, { | ||
| useEventListener('mousedown', handlePointerDown, interactiveTarget, { | ||
| capture: true, | ||
@@ -420,3 +431,3 @@ passive: false | ||
| useEventListener('touchstart', handlePointerDown, containerRef.current, { | ||
| useEventListener('touchstart', handlePointerDown, interactiveTarget, { | ||
| capture: true, | ||
@@ -442,11 +453,10 @@ passive: false | ||
| return React.createElement("div", Object.assign({}, props, { | ||
| ref: containerRef, | ||
| ref: rootContainerRef, | ||
| style: rootStyle, | ||
| "data-rcs": "root" | ||
| }), itemTwo, React.createElement(ReactCompareSliderItem, { | ||
| position: internalPositionPx, | ||
| portrait: portrait | ||
| }), itemTwo, React.createElement(ReactCompareSliderClipContainer, { | ||
| ref: clipContainerRef | ||
| }, itemOne), React.createElement(ReactCompareSliderHandleContainer, { | ||
| position: internalPositionPx, | ||
| portrait: portrait | ||
| portrait: portrait, | ||
| ref: handleContainerRef | ||
| }, Handle)); | ||
@@ -453,0 +463,0 @@ }; |
| { | ||
| "name": "react-compare-slider", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "license": "MIT", | ||
@@ -9,3 +9,3 @@ "repository": { | ||
| }, | ||
| "homepage": "https://react-compare-slider.netlify.app", | ||
| "homepage": "https://react-compare-slider.vercel.app", | ||
| "author": { | ||
@@ -78,39 +78,39 @@ "email": "averynerdyman@gmail.com", | ||
| "@emotion/css": "^10.0.27", | ||
| "@storybook/addon-actions": "^6.0.0-rc.14", | ||
| "@storybook/addon-actions": "^6.0.21", | ||
| "@storybook/addon-console": "^1.2.1", | ||
| "@storybook/addon-controls": "^6.0.0-rc.14", | ||
| "@storybook/addon-docs": "^6.0.0-rc.14", | ||
| "@storybook/addon-links": "^6.0.0-rc.14", | ||
| "@storybook/addon-storysource": "^6.0.0-rc.14", | ||
| "@storybook/addon-viewport": "^6.0.0-rc.14", | ||
| "@storybook/addons": "^6.0.0-rc.14", | ||
| "@storybook/addon-controls": "^6.0.21", | ||
| "@storybook/addon-docs": "^6.0.21", | ||
| "@storybook/addon-storysource": "^6.0.21", | ||
| "@storybook/addon-viewport": "^6.0.21", | ||
| "@storybook/addons": "^6.0.21", | ||
| "@storybook/preset-typescript": "3.0.0", | ||
| "@storybook/react": "^6.0.0-rc.14", | ||
| "@storybook/theming": "^6.0.0-rc.14", | ||
| "@testing-library/jest-dom": "^5.11.1", | ||
| "@testing-library/react": "^10.4.7", | ||
| "@types/jest": "^26.0.7", | ||
| "@storybook/react": "^6.0.21", | ||
| "@storybook/theming": "^6.0.21", | ||
| "@testing-library/jest-dom": "^5.11.4", | ||
| "@testing-library/react": "^11.0.2", | ||
| "@types/jest": "^26.0.13", | ||
| "@types/node": "^12.12.26", | ||
| "@types/react": "^16.9.43", | ||
| "@types/react": "^16.9.49", | ||
| "@types/react-dom": "^16.9.8", | ||
| "@typescript-eslint/eslint-plugin": "^3.7.0", | ||
| "@typescript-eslint/parser": "^3.7.0", | ||
| "@typescript-eslint/eslint-plugin": "^4.0.1", | ||
| "@typescript-eslint/parser": "^4.0.1", | ||
| "babel-loader": "^8.1.0", | ||
| "eslint": "^7.5.0", | ||
| "eslint-plugin-jest": "^23.18.2", | ||
| "eslint-plugin-jest-dom": "^3.1.4", | ||
| "eslint-plugin-react": "^7.20.3", | ||
| "eslint-plugin-react-hooks": "^4.0.8", | ||
| "eslint-plugin-testing-library": "^3.3.2", | ||
| "eslint": "^7.8.1", | ||
| "eslint-plugin-jest": "^24.0.0", | ||
| "eslint-plugin-jest-dom": "^3.2.2", | ||
| "eslint-plugin-react": "^7.20.6", | ||
| "eslint-plugin-react-hooks": "^4.1.0", | ||
| "eslint-plugin-testing-library": "^3.8.0", | ||
| "google-maps-react": "^2.0.6", | ||
| "husky": "^4.2.5", | ||
| "lint-staged": "^10.2.11", | ||
| "np": "^6.3.2", | ||
| "prettier": "^2.0.5", | ||
| "pretty-quick": "^2.0.1", | ||
| "lint-staged": "^10.3.0", | ||
| "np": "^6.5.0", | ||
| "prettier": "^2.1.1", | ||
| "pretty-quick": "^3.0.0", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "remark-codesandbox": "^0.5.2", | ||
| "tsdx": "^0.13.2", | ||
| "tslib": "^2.0.0", | ||
| "typescript": "^3.9.7" | ||
| "remark-codesandbox": "^0.6.0", | ||
| "tsdx": "^0.13.3", | ||
| "tslib": "^2.0.1", | ||
| "typescript": "^4.0.2" | ||
| }, | ||
@@ -117,0 +117,0 @@ "dependencies": { |
@@ -21,6 +21,6 @@ <div align="center"> | ||
| <a href="https://codeclimate.com/github/nerdyman/react-compare-slider"> | ||
| <img src="https://img.shields.io/github/workflow/status/nerdyman/react-compare-slider/test?label=test" alt="Coverage" /> | ||
| <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" /> | ||
| </a> | ||
| <a href="https://react-compare-slider.netlify.app"> | ||
| <img src="https://img.shields.io/badge/demos-🚀-blue.svg" alt="Demos" /> | ||
| <a href="https://react-compare-slider.vercel.app"> | ||
| <img src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" alt="Demos" /> | ||
| </a> | ||
@@ -34,3 +34,3 @@ | ||
| - Supports responsive images and any other React components ( `picture`, `canvas`, `iframe` etc.) | ||
| - Supports responsive images and any other React components (`picture`, `video`, `canvas`, `iframe` etc.) | ||
| - Supports landscape and portrait orientations | ||
@@ -46,3 +46,3 @@ - Simple API | ||
| - Storybook: [docs](https://react-compare-slider.netlify.app/?path=/docs/docs-intro--page), [demos](https://react-compare-slider.netlify.app/?path=/docs/demos-images) | ||
| - Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-intro--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos) | ||
| - CodeSandbox: [basic editable demo](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l) | ||
@@ -75,3 +75,3 @@ - [Local example](./example) | ||
| See the [Images docs](https://react-compare-slider.netlify.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.netlify.app/?path=/docs/demos-images). | ||
| See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.vercel.app/?path=/story/demos--images). | ||
@@ -82,11 +82,12 @@ ## Props | ||
| |------|------|:--------:|---------------|-------------| | ||
| | `boundsPadding` | `number` | | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). | | ||
| | `handle` | `ReactNode` | | `undefined` | Custom handle component | | ||
| | `itemOne` | `ReactNode` | ✓ | `undefined` | First component to show in slider | | ||
| | `itemTwo` | `ReactNode` | ✓ | `undefined` | Second component to show in slider | | ||
| | `onPositionChange` | `function` | | `undefined` | Callback on position change, returns current position as argument `(position) => { ... }` | | ||
| | `position` | `number` | | `50` | Initial percentage position of divide (`0-100`) | | ||
| | `portrait` | `boolean` | | `false` | Whether to use portrait orientation | | ||
| | [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` | | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). | | ||
| | [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` | | `undefined` | Custom handle component. | | ||
| | `itemOne` | `ReactNode` | ✓ | `undefined` | First component to show in slider. | | ||
| | `itemTwo` | `ReactNode` | ✓ | `undefined` | Second component to show in slider. | | ||
| | [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean` | | `false` | Whether to only change position when handle is interacted with (useful for touch devices). | | ||
| | [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change) | `function` | | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. | | ||
| | [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. | | ||
| | [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position) | `number` | | `50` | Initial percentage position of divide (`0-100`). | | ||
| See the [API docs](https://react-compare-slider.netlify.app/?path=/docs/docs-api--page) for more information. | ||
| See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information. | ||
@@ -97,9 +98,9 @@ ## Extending | ||
| The library supports all types of React components; custom components can apply | ||
| the same base styles as `ReactCompareSliderImage` by using the | ||
| `styleFitContainer` CSS utility. | ||
| The library supports all types of React components. | ||
| See the [styleFitContainer docs](https://react-compare-slider.netlify.app/?path=/docs/docs-api--page#stylefitcontainer) | ||
| for more information. | ||
| - [Google Maps Demo](https://react-compare-slider.vercel.app/?path=/story/demos-custom-components--google-maps) | ||
| Custom components can apply the same base styles as `ReactCompareSliderImage` | ||
| by using the [`styleFitContainer` CSS utility](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page#stylefitcontainer). | ||
| ### Custom Handles | ||
@@ -109,3 +110,3 @@ | ||
| See the [Handles docs](https://react-compare-slider.netlify.app/?path=/docs/docs-handles--page) for more information. | ||
| See the [Handles docs](https://react-compare-slider.vercel.app/?path=/docs/docs-handles--page) for more information. | ||
@@ -112,0 +113,0 @@ ## Requirements |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by5.18%
147857
- Lines of code
- increased by1.71%
952
- Number of lines in readme file
- increased by0.89%
113
No dependency changes