@hoc-ht/react-simple-dnd

1.3.1 • Public • Published

React Simple DnD

npm npm npm

A simple ReactJS drag & drop library.

Installation

Run the following command:

npm install @hoc-ht/react-simple-dnd

Usage

See the example in the example folder for detail.

Props

<SimpleDragDrop />

Wraps the part of your application you want to have drag and drop enabled for

Props Type Default value Description
onDragStart function Callback triggered when a drag has started
onDragEnd function Callback triggered when a drag has ended
getDragMetadata function Use this callback when a drag has started to inject your custom drag data
fixedItemHeight number 0 Use this props if you want to resize the dragging item base on this value

<Droppable />

An area that can be dropped into. Contains <Draggable />

Props Type Default value Description
droppableId (required) string
isDropDisabled bool false
fixedGap number Define the gap between two <Draggable /> items
validation function function({draggableId, source, metadata}, event) {}
triggered when a drag has started or manually call revalidate method, should return false or throw an error to disable drop on this area

All other props will be passed as droppable config and can be access in the result of onDragEnd method.

<Draggable />

What can be dragged around

Props Type Default value Description
draggableId (required) string
index number Current item index

Important note: All draggableId in a <SimpleDragDrop /> should be unique.

Methods

revalidate(event)

Trigger validation for all <Droppable /> item.

  • event: event which will be passed to validation method

Return: none

Authors

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @hoc-ht/react-simple-dnd

Weekly Downloads

0

Version

1.3.1

License

MIT

Unpacked Size

31.2 kB

Total Files

12

Last publish

Collaborators

  • hoc-ht