import {MouseDraggable} from 'fr-draggable';

const MyComponent = () => {
    return (
        <MouseDraggable onStart={(localMouseDownEvent, data) => { console.log('drag start', data); }}
                        onDrag={(windowMouseMoveEvent, data) => { console.log('drag move', data); }}
                        onEnd={(windowMouseUpEvent, data) => { console.log('drag end', data); }}>
            <div>drag me</div>
        </MouseDraggable>
    )
};

const MyComponentWithHandle = () => {
    const rootRef = useRef();
    return (
        <div ref={rootRef}>
            <div>drag me</div>
            <MouseDraggable onStart={(localMouseDownEvent, data) => { console.log('drag start', data); }}
                            onDrag={(windowMouseMoveEvent, data) => { console.log('drag move', data); }}
                            onEnd={(windowMouseUpEvent, data) => { console.log('drag end', data); }}
                            rootRef={rootRef}>
                <div>handle</div>
            </MouseDraggable>
        </div>
    )
};