25 lines
770 B
TypeScript
25 lines
770 B
TypeScript
import { useEffect } from 'react';
|
|
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
|
|
|
|
/**
|
|
* Custom hook to handle cursor style changes during drag operations
|
|
* @param isDragging - Boolean indicating if an item is being dragged
|
|
*/
|
|
const useDragCursor = (isDragging: boolean) => {
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (!isDragging) return;
|
|
|
|
// Save the original cursor style
|
|
const originalCursor = document.body.style.cursor;
|
|
|
|
// Apply grabbing cursor to the entire document when dragging
|
|
document.body.style.cursor = 'grabbing';
|
|
|
|
// Reset cursor when dragging stops or component unmounts
|
|
return () => {
|
|
document.body.style.cursor = originalCursor;
|
|
};
|
|
}, [isDragging]);
|
|
};
|
|
|
|
export default useDragCursor;
|