import React, { useEffect, useState } from 'react'; import Moveable from 'react-moveable'; const Movable = ({ moveRef, setStyle}) => { const [ renderMovable, setRenderMovable ] = useState(false); useEffect(() => { setRenderMovable(true); }, []); const handleDrag = e => { setStyle(e.transform); }; const onResize= e => { console.log("onResize", e.target); e.delta[0] && (e.target.style.width = `${e.width}px`); e.delta[1] && (e.target.style.height = `${e.height}px`); } const onRotate = e => { setStyle(e.transform); } if (!renderMovable) return null; return ( <Moveable target={moveRef.current} draggable={true} resizable={true} rotatable={true} onRotate={onRotate} clipArea={true} throttleDrag={0} onDrag={handleDrag} onResize={onResize} bounds={false} /> ); }; export default Movable;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter