Swash is a React framework for drag and drop interactions.
It provides utilities for passing data between components using drag and drop.
DISCLAIMER: This is very work in progress. The API is not stable and may change at any time.
Swash has two main building blocks: the Draggable and DragReceiver
components.
Swash provides a Draggable component that wraps the component you want to make
draggable. Swash also provides a DragReceiver component that receives Swash
drag events.
Each draggable provides a DraggableContext to its children, which can be used
to set a payload that will be passed to the DragReceiver whenever the
Draggable interacts with it.
A DragReceiver can receive callbacks for properties such as
onSwashDragEnter. These callbacks will receive payloads from the draggable
that is currently interacting with the DragReceiver.
The callbacks passed to DragReceiver can also reply to the draggable using the
event's reply method. This method can be used to send a payload to the
draggable, which may handle it if the onReply property is provided.
Swash payloads are type-safe. To create a new payload type, you can extend the
Payload generic class like this:
export class PersonPayload extends Payload<Person> {}You will then be able to construct a new PersonPayload passing a value of type
Person to its constructor.
You can check which payload type was received in an event using the instanceof
operator.
Whenever a draggable is being dragged, it is removed from the layout it was in. This can be a problem if you want to preserve the space it was occupying, or if you want to make a smooth layout transition.
For such cases, Draggable has a ghost property so you can specify a React
Node to be rendered in the Draggable's original location while it is being
dragged.
Ghost nodes can use the GhostContext, which provides the ghost node with the
draggable's last dimensions before it was removed from the layout.
Documentation with proper examples is still not available, but everything exported in the module has JSDoc comments.
Please be patient, I'll make examples as soon as I can.