2020-08-26 08:34:01 +00:00
|
|
|
# DragAndDrop
|
|
|
|
|
|
|
|
|
|
Drag And Drop component can be used as Dropzone
|
|
|
|
|
|
|
|
|
|
#### See documentation: https://github.com/react-dropzone/react-dropzone
|
|
|
|
|
|
|
|
|
|
```js
|
2022-07-22 19:01:25 +00:00
|
|
|
import DragAndDrop from "@docspace/components/drag-and-drop";
|
2020-08-26 08:34:01 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
<DragAndDrop onDrop={onDrop} style={width: 200, height: 200, border: "5px solid #999"}>
|
|
|
|
|
<Text style={textStyles} color="#999" fontSize="20px">
|
|
|
|
|
Drop items here
|
|
|
|
|
</Text>
|
|
|
|
|
</DragAndDrop>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
|
|
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ------------ | :--------: | :------: | :----: | :-----: | ------------------------------------------------------------- |
|
|
|
|
|
| `dragging` | `bool` | | | `false` | Show that the item is being dragged now. |
|
|
|
|
|
| `isDropZone` | `bool` | | | `false` | Sets the component as a dropzone |
|
|
|
|
|
| `onDrop` | `function` | | | | Occurs when the dragged element is dropped on the drop target |
|
