Drag and Drop library for React.

Overview

react-tiny-dnd

npm version npm downloads npm size

Drag and Drop library for React.

Demo

Install via npm

npm install react-tiny-dnd

or

yarn add react-tiny-dnd

Features

  • Vertical lists
  • Easy auto scrolling integration 🔥
  • Add and remove items with no doubts
  • Variable heights supported by design 🚀
  • Custom drag handles
  • Multiple drag handlers

Usage

App.js

const [items, setItems] = useState(defaultItems);

const onDrop = (dragIndex: number, overIndex: number) => {
  const nextItems = moveItems(items, dragIndex, overIndex);
  setItems(nextItems);
};

const context = useDraggableContext({
  onDrop,
});

return (
  <>
    {items.map((item, i) => {
      return (
        <DraggableItem context={context} key={item.id} index={i} item={item} />
      );
    })}
  </>
);

DraggableItem.js

dnd
)} /> ); };">
const DraggableItem = ({
  index,
  context,
  item,
}) => {
  const {
    listeners, // Handler listeners can be passed to Draggable component as well
    isDragging,
  } = useDraggable(context, index);
  
  return (
    <Draggable context={context} key={item.id} index={index}>
      <Item
        item={item}
        handler={(
          <div className="dnd-icon" {...listeners}>
            <img src={dndIc} alt="dnd" />
          </div>
        )}
      />
    </Draggable>
  );
};

API

useDraggableContext

  • onDrop: Function - fires when the item drops in the desired place
  • snapThreshold?: number - the threshold from which drop areas will be highlighted

Returns DraggableContextType - containing the dragging state

useDraggable

  • context: DraggableContextType - containing the dragging state
  • index: number - uses to identify the item

Returns { listeners: EventHandler[], isDragging: boolean }

Draggable

  • context: DraggableContextType - containing the dragging state
  • index: number - uses to identify the item
  • listeners?: EventHandler[] - containing dragging event handlers and can be passed to your desired handler (one or more)
You might also like...
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

 Creating an app using Drag and Drop with React without libraries 🤏
Creating an app using Drag and Drop with React without libraries 🤏

Creating an app using Drag and Drop with React without libraries 👆 ! This time, we are going to implement the functionality to do a Drag & Drop with

:ok_hand: Drag and drop so simple it hurts
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

A directive based drag and drop container for solid-js
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

🦋 react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Taskboard with drag'n drop feature. Built w/ React, TypeScript
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React 16.8 Support both mous

Owner
Rafael Hovhannisyan
Software Engineer
Rafael Hovhannisyan
Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Builder.io 3.8k Oct 1, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.1k Oct 1, 2022
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Oct 4, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 6 Jun 29, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Oct 1, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Sep 30, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 5.6k Oct 4, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.3k Sep 28, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 41 Sep 14, 2022