kyechan99 / dragond-react

🐲 Show helper components after dragging

Dragond

Install

npm install dragond-react --save

Usage

Detailed usage is in the Docs.

import { DragondProvider, Dragond, DragondDevice } from "dragond-react";

return (
  <DragondProvider>
    <Dragond>...</Dragond>
    <DragondDevice>...</DragondDevice>
  </DragondProvider>
);

DragondProvider

DragondProvider is the provider that must be located at the top to use dragond-react.

All dragond-react depend on the closest DragondProvider for data determination.

<DragondProvider>
    ...
</DragondProvider>

Dragond

Dragond is the area where you will recognize the drag.

It must depend on the parent element's DragondProvider. Alone it does nothing. Must be used with DragondDevice.

<DragondProvider>
    <Dragond> Lorem Ipsum ... </Dragond>
</DragondProvider>

DragondDevice

DragondDevice is a component that will be displayed when dragged.

It must depend on the parent element's DragondProvider. Alone it does nothing. Should be used with Dragond.

<DragondProvider>
    <Dragond> ... </Dragond>
    <DragondDevice> I am Dragond! </DragondDevice>
</DragondProvider>