Beautiful drag and drop interactions with react hooks

This page summarizes the projects mentioned and recommended in the original post on dev.to
React UI Components Sortable Drag and Drop Sorting

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured

  • react-sortable-hoc

    A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

    • react-sortable-hoc - considered deprecated in favour of dnd-kit.

  • dnd-kit

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

    • dnd-kit which we're going to explore today.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    • As part of this investigation I seriously considered react-beautiful-dnd, whilst it has great support and demos, I hit a few stumbling blocks along to way. It's footprint was also a hard sell to add into the application for a single use-case. I also encountered this issue whilst I was investigating a different use case where I wanted horizontal and vertical re-ordering in a grid.

  • react-table

    🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

    • react-table is another lightweight and customisable react library, it allows users to use utilities and hooks to build up tables for their UIs. This description may sounds quite similar to what I described before about dnd-kit where you can use a series of utilities and hooks to implement drag and drop. It is for this reason thatreact-table and dnd-kit fit together really nicely.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • A feature-rich front-end drag-and-drop component library

    10 projects | news.ycombinator.com | 24 Apr 2024

  • Curious case of Drag and Drop

    3 projects | dev.to | 30 Jan 2024

  • How do you implement drag-select using React-DnD?

    2 projects | /r/reactjs | 9 Apr 2023

  • How to Drag and Drop in React

    2 projects | /r/reactjs | 14 Mar 2023

  • Drag and Drop for React 18

    4 projects | /r/reactjs | 15 Feb 2023