# useDropTarget

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

### ok, How to use ?

example usage below given.

```jsx
import { useDropTarget } from '@zohodesk/react-dnd';
function MyDropppable(props) {
  const { onDragStart, onDrag, onDragEnd, isDisable, delay, groupName } = props;
  const { setDropTarget, isDragOver, status, isAllowed } = useDropTarget({
    onDragStart,
    onDrag,
    onDragEnd,
    isDisable,
    delay,
    groupName,
  });

  return (
    <div
      ref={setDropTarget}
      className={`${isDragOver ? 'shade' : 'normal'} ${
        isAllowed ? 'green' : 'red'
      }`}>
      {status} on dropppable
    </div>
  );
}
```

#### Explanation

if you need dropppable then just use **useDropTarget**.

## useDropTarget

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

**return** : `Object`

#### Return Value Object

- **setDropTarget** `Function` you must send element ref to this function or make it as ref of that element ref.
- **isDragOver** `Boolean` this indicates dragging element is hover or over on DropTaget.
- **status** `Enum('dragover'|'allowed'|'notallowed'|'idle')` this tell current state of DropTarget.
- **isAllowed** `Boolean` this indicates dragging element can drop inside of DropTarget.

#### DropTargetOptions

it was Object.

|     member Name      |   Type   | Default Value | Required |
| :------------------: | :------: | :-----------: | -------: |
|     onDragEnter      | Function |       -       |       No |
|      onDragOver      | Function |       -       |       No |
|        onDrop        | Function |       -       |      Yes |
|     onDragLeave      | Function |       -       |       No |
|  allowedDragGroups   | String[] |       -       |      Yes |
|      shouldDrop      | Function |       -       |       No |
|      isDisable       | Boolean  |       -       |       No |
| stopEventPropagation | Boolean  |       -       |       No |

**it's member's below.**

- **`onDragEnter`** **:** this function to notify dragging element is enter on DropTaget.<br />
  **arguments** :

  1. **coordinates**: `{ mouseX: Number, mouseY: Number}` this was mouse coordinates.
  2. **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .

- **`onDragOver`** **:** this function to notify dragging element is hover or over on DropTaget.<br />
  **arguments** :

  1. **coordinates**: `{ mouseX: Number, mouseY: Number}` this was mouse coordinates.
  2. **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .

- **`onDrop`** **:** this function to notify dragging element is drop on DropTaget.<br />
  **arguments** :

  1. **coordinates**: `{ mouseX: Number, mouseY: Number}` this was mouse coordinates.
  2. **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .

- **`onDragLeave`** **:** this function to notify dragging element is leave from DropTaget.<br />
  **arguments** :

  1. **coordinates**: `{ mouseX: Number, mouseY: Number}` this was mouse coordinates.
  2. **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .

- **`allowedDragGroups`** **:** this is array will have which group of draggable can drop inside of DropTarget.
- **`shouldDrop`** **:** this function returns boolean to ensure draggable element can drop inside of DropTarget.<br />
  **arguments** :

  1. **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .

- **`isDisable`** **:** this boolean disable dropping events.
- **`stopEventPropagation`** **:** this boolean disable drop event bubbling.