# useDropShadow

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 { useDropShadow } from '@zohodesk/react-dnd';

function MyDropShow(props) {
  const {
    innerRef,
    positionStyle,
    dragElementInfo,
    needPlaceHolder,
  } = useDropShadow({
    isAbsolute: true,
    hasMargin: true,
  });

  if (!needPlaceHolder) {
    return null;
  }

  return (
    <div ref={innerRef} style={positionStyle} className={'dropShadow'}>
      {dragElementInfo.data}
    </div>
  );
}
```

#### Explanation

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

## useDropShadow

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

**return** : `Object`

#### Return Value Object

- **innerRef** `Function` you must send element ref to this function or make it as ref of that element ref.
- **positionStyle**: `Object` this is relative or absolute based on you option position css style from it's start position.
  **dragElementInfo** `any` this was given by you on **onDragStart** event of current dragging element .
- **needPlaceHolder** `Boolean` this indicates dragging element is hover or over on DropTaget. and when user try to add new element then only this will true.

#### DropShadowOptions

| member Name |  Type   | Default Value | Required |
| :---------: | :-----: | :-----------: | -------: |
| isAbsolute  | Boolean |       -       |       No |
|  hasMargin  | Boolean |       -       |       No |

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

- **`hasMargin`** **:** this element has margin.
- **`isAbsolute`** **:** this will indicate the how the DropShadow will be move absolute or relative.