react-simple-before-after/dist/index.js

A simple yet powerful react component for adding a nice before after image slider to your project.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=function(){return(r=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)};function o(e,t){switch(t.type){case"change":return{rangeValue:t.payload};case"move":return{rangeValue:Math.round(t.payload)};default:return e}}exports.BeforeAfter=function(n){var a=n.beforeImage,i=n.afterImage,s=n.onChange,l=n.onPointerMove,d=n.onPointerEnter,c=n.onPointerLeave,u=n.pointerMove,v=void 0!==u&&u,f=n.className,h=void 0===f?"before-after-slider":f,p=n.beforeClassName,g=void 0===p?"before":p,y=n.afterClassName,m=void 0===y?"after":y,b=n.buttonClassName,x=void 0===b?"resize-button":b,j=n.style,w=n.beforeStyle,C=n.afterStyle,N=n.buttonStyle,P=t.useReducer(o,{rangeValue:50}),V=P[0].rangeValue,M=P[1];return e.jsxs("div",r({className:h,style:r({position:"relative",overflow:"hidden",width:"fit-content",cursor:"e-resize",userSelect:"none"},j),onPointerMove:v?function(e){var t=e.clientX,r=e.currentTarget.getBoundingClientRect(),o=r.left,n=r.width,a=t-o;a>=0&&M({type:"move",payload:a/n*100}),l&&l(e)}:void 0,onPointerEnter:function(e){d&&d(e)},onPointerLeave:function(e){c&&c(e)}},{children:[e.jsx("div",r({className:g,style:r({position:"absolute",overflow:"hidden",width:"".concat(V,"%"),height:"100%",top:0,left:0,borderRight:"2px solid #eee"},w)},{children:e.jsx("img",{src:a,alt:"before",style:{height:"100%"}},void 0)}),void 0),e.jsx("div",r({className:m,style:C},{children:e.jsx("img",{src:i,alt:"after",style:{maxWidth:"100%",display:"block"}},void 0)}),void 0),!v&&e.jsxs(e.Fragment,{children:[e.jsx("input",{type:"range",min:0,max:100,value:V,name:"slider",onChange:function(e){M({type:"change",payload:Number(e.target.value)}),s&&s(e)},style:{appearance:"none",backgroundColor:"transparent",width:"100%",height:" 100%",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",cursor:"inherit"}},void 0),e.jsx("div",r({className:x,style:r({backgroundColor:"#fff",pointerEvents:"none",position:"absolute",top:"50%",left:"".concat(V,"%"),transform:"translate(-50%,-50%)",borderRadius:"50%",width:30,height:30,display:"flex",justifyContent:"center",alignItems:"center"},N)},{children:e.jsx("svg",r({fill:"#333",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24"},{children:e.jsx("path",{d:"M24,12l-5.7-5.7V11c-3.7,0-9,0-12.6,0V6.3L0,12l5.8,5.7V13c3.6,0,8.9,0,12.5,0v4.7L24,12z"},void 0)}),void 0)}),void 0)]},void 0)]}),void 0)};
//# sourceMappingURL=index.js.map