Create a useDrag Hook in React

This challenge asks you to implement a custom React hook, useDrag, that provides drag-and-drop functionality for an element. This hook will manage the element's position based on mouse movements during a drag operation, offering a foundational building block for more complex drag-and-drop interactions. Building this hook will solidify your understanding of React hooks, event handling, and state management.

Problem Description

You need to create a useDrag hook that takes a ref to a DOM element as input and returns an object containing:

• isDragging: A boolean indicating whether the element is currently being dragged.
• dragOffset: An object containing the x and y offsets of the dragged element from its initial position.
• startDrag: A function that initiates the drag operation when called.
• stopDrag: A function that terminates the drag operation when called.

The startDrag function should:

1. Attach event listeners for mousedown, mousemove, and mouseup to the document.
2. Store the initial position of the element (using the provided ref).
3. Set isDragging to true.

The mousemove event listener should:

1. Calculate the new position of the element based on the mouse movement relative to the element's initial position.
2. Update the dragOffset with the new x and y values.

The mouseup and mouseleave (to handle accidental mouse leaving the window during drag) event listeners should:

1. Set isDragging to false.
2. Remove the event listeners from the document.

The stopDrag function should immediately set isDragging to false and remove the event listeners.

Key Requirements:

• The hook must accept a React ref to a DOM element.
• The hook must correctly track the element's position during a drag operation.
• The hook must properly start and stop the drag operation.
• The hook must clean up event listeners when the drag operation ends.
• The hook must be written in TypeScript.

Expected Behavior:

When startDrag is called, the element should become draggable. As the mouse is moved while the button is held down, the element should follow the mouse cursor, with its position updated based on the initial position. When the mouse button is released or the mouse leaves the window, the element should stop moving, and the isDragging flag should be set to false.

Edge Cases to Consider:

• What happens if the ref is not yet attached to a DOM element when startDrag is called? (Handle this gracefully, perhaps by doing nothing).
• What happens if stopDrag is called multiple times? (Ensure it doesn't cause errors).
• What happens if the element is dragged outside the viewport? (The hook shouldn't prevent this, but it should still track the offset).
• Consider performance implications of frequent updates during the mousemove event. While not a primary focus, avoid unnecessary re-renders.

Examples

Example 1:

Input: A div element with a ref named 'draggableDiv'
Output:  When startDrag is called, the div follows the mouse. dragOffset updates accordingly. isDragging becomes true during drag, false when stopped.
Explanation: The hook correctly manages the drag state and updates the element's position.

Example 2:

Input: A ref that is initially null (not attached to a DOM element).
Output: startDrag does nothing. isDragging remains false. No errors are thrown.
Explanation: The hook handles the case where the ref is not yet available.

Example 3:

Input:  A div element being dragged, and the mouse is released outside the browser window.
Output: The drag stops. isDragging becomes false. The dragOffset reflects the element's final position relative to its initial position.
Explanation: The hook handles mouse leaving the window during a drag.

Constraints

• The hook must be written in TypeScript.
• The hook should not introduce any unnecessary dependencies.
• The hook should be relatively performant, avoiding excessive re-renders.
• The element being dragged should move relative to its initial position, not the mouse cursor's absolute position.

Notes

• Consider using addEventListener and removeEventListener for more control over event listeners.
• Think about how to handle the initial position of the element correctly.
• The dragOffset should represent the change in position, not the absolute position.
• This hook provides the core drag functionality; styling and constraints (e.g., preventing dragging outside a container) are left as separate concerns.
• Focus on the core logic of tracking the drag state and updating the element's position.