Back to React Dnd

DragPreviewImage

packages/docsite/markdown/docs/01 Common Components/DragPreviewImage.md

16.0.0729 B
Original Source

New to React DnD? Read the overview before jumping into the docs.

DragPreviewImage

A Component to render an HTML Image element as a disconnected drag preview.

Usage

jsx
import { DragSource, DragPreviewImage } from 'react-dnd'

function DraggableHouse({ connectDragSource, connectDragPreview }) {
  return (
    <>
      <DragPreviewImage src="house_dragged.png" connect={connectDragPreview} />
      <div ref={connectDragSource}>🏠</div>
    </>
  )
}
export default DragSource(
  /* ... */
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview()
  })
)

Props

  • connect: Required. The drag preview connector function