# useDragPreview

this hooks for designed to make some normal element as dragPreview element.
in simple words, If you need to do some element as dragPreview then you can use this hook.

### ok, How to use ?

example usage below given.

```jsx
import { useDragPreview } from '@zohodesk/react-dnd';
function MyDragPreview(props) {
  const [dragPreviewProps, dragPreviewRenderer] = useDragPreview();
  const {
    isDragging,
    dragElementInfo,
    positionStyle,
    hideDragImage,
    coordinates,
  } = dragPreviewProps;

  if (!isDragging || !hideDragImage) {
    return null;
  }

  return (
    <div style={positionStyle} className={'som styles'}>
      {dragElementInfo.content}
    </div>
  );
}
```

#### Explanation

if you need dragPreview then just use **useDragPreview**.

## useDragPreview

**arguments** : **`DropTargetOptions`** (it's full details below).

**return** : `Object`

#### Return Value Array

1. **dragPreviewProps** `DragPreviewProps` if you call **dragPreviewRenderer** then you must send **dragPreviewProps** this as argument.
2. **dragPreviewRenderer** `Function` this was given by you in **onDragStart** of current dragging element, if any element is not dragging then the value is null.the default definetion of this is `this function will return react element will be used for replace the drag ghost.`.

#### DragPreviewProps

it was Object.
**it's member's below.**

- **isDragging** `Boolean` this indicate that current element draggging status.
- **dragElementInfo** `any` this was given by you in **onDragStart**.
- **positionStyle** `Object` style like top and left and some css style for positioning the dragPreviewElement near by cursor.
- **hideDragImage** `Boolean` this was given by you in **onDragStart**.
- **coordinates** { mouseX: _`Number`_, mouseY: _`Number`_} this was mouse coordinates.ropTargetOptions