diff --git a/docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx b/docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx index a5b9166871..e95588de76 100644 --- a/docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx +++ b/docs/docs/core/content-manager/hooks/use-drag-and-drop.mdx @@ -24,7 +24,7 @@ that you are somewhat familiar with `@strapi/design-system` components. ### Basic usage Below is a basic example usage where we're not interested in rendering custom previews in the DragLayer. However, we do replace -the current item with a placeholder in the meantime hence why we use the `dragPreviewRef`. +the current item with a placeholder. ```jsx import { Box, Flex, IconButton } from '@strapi/design-system'; @@ -36,19 +36,18 @@ import { composeRefs } from 'path/to/utils'; import { Placeholder } from './Placeholder'; const MyComponent = ({ onMoveItem }) => { - const [{ handlerId, isDragging, handleKeyDown }, myRef, dropRef, dragRef, dragPreviewRef] = - useDragAndDrop(true, { - type: 'my-type', - index, - onMoveItem, - }); + const [{ handlerId, isDragging, handleKeyDown }, myRef, dropRef, dragRef] = useDragAndDrop(true, { + type: 'my-type', + index, + onMoveItem, + }); const composedRefs = composeRefs(myRef, dragRef); return ( {isDragging ? ( - + ) : ( { // highlight-start useEffect(() => { - dragPreviewRef(getEmptyImage(), { captureDraggingState: false }); + dragPreviewRef(getEmptyImage()); }, [dragPreviewRef]); // highlight-end @@ -103,7 +102,7 @@ const MyComponent = ({ onMoveItem }) => { return ( {isDragging ? ( - + ) : (