There’s a new kit on the block. A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Joined December 2020
- Tweets30
- Following4
- Followers813
- Likes96
dnd kit retweeted
Did you know Tanstack (the one and only) also provides the best visualization of NPM statistics?
I submitted a PR to include drag and drop libraries so you can see how their popularity has changed over time.
In short, @dndkit is now the favorite by a wide margin.
dnd kit retweeted
Underrated drag and drop UX detail:
Slightly rotate items while you drag them. It feels physical, playful, and instantly clear what’s happening.
TBF, drag and drop is sooo tricky to nail. At define we use @dndkit. Thank you @clauderic_d!
dnd kit retweeted
Free @shadcn Data Grid with 20 advanced examples built with @tan_stack table and @dndkit:
- Wrapper for TanStack table
- Fully customizable table, row & cell
- Drag & drop: rows/columns
- Pinnable & movable columns
- Local & remote data support
- Rows selections
- Movable columns
- Columns visibility
- Sticky header
- Horizontal & vertical scrolling
- Expandable rows and more...
dnd kit retweeted
Just open-sourced PositionObserver – the missing observer to detect position, size & visibility changes.
⚡️ Async & efficient — zero polling, powered by native observers
🎯 Track elements relative to viewport or any root element
Try it out 👉 npm install position-observer
dnd kit retweeted
I just updated the TanStack Table drag and drop examples to use @dndkit along with a new column ordering guide with recommendations on how to achieve best results when combining TanStack React Table with DnD libraries.
dnd kit retweeted
dndkit is great btw
I’ve been implementing database-persisted ordering, and @dndkit has been a breeze to work with - including optimistic updates
dndkit.com/
dnd kit retweeted
Hi everyone!
Just a quick preview of the next video project: PageForm.
It's a fullstack drag-and-drop web form builder that allows us to create forms, share them, and collect submissions.
We will also implement a custom ( and simple ) validation logic for our forms.
Stack:
- @nextjs ( with server actions )
- @reactjs @typescript
- @tailwindcss
- @shadcn /ui ( what an amazing library )
- @dndkit
- @prisma
- @vercel (deploy and postgresql storage )
This is not a clone: I've just made this project for the upcoming video.
I plan (and hope) to release the video in 1 week.
Hope you like it, and let me know what you think 😃
Ps. Video will be available on my youtube channel: codewithkliton
This is something that is actively being worked on, expect things to be easier to setup and more robust in the near future. Refer to this post for more details github.com/clauderic/dnd-kit…
Touch devices are supported yes. There are two sensors that can be used, either the Pointer sensor which supports any pointer input (including touch), or a dedicated TouchSensor
docs.dndkit.com/api-document…
dnd kit retweeted
✨ First Article
Learn how to use the @dndkit library to build beautiful & accessible drag-and-drop interactions in React: kxlaa.com/posts/drag-and-dro…
The article includes many interactive demos that should help explain the concepts:
dnd kit retweeted
Finally got drag and drop working in Daybuilder 🎉
I was worried this would be really tricky. But @dndkit actually made it quite simple. h/t to @clauderic_d for a building an awesome open source library for this 🫡
dnd kit retweeted
Blocks can be reordered via drag-and-drop. Thanks to the awesome @dndkit library.
dnd kit retweeted
Album Rotation - Organize and visualize your favorite albums 💿
albumrotation.com/
Uses:
- @dndkit for drag & drop (dndkit.com/)
- React Spring for delete animation (react-spring.io/)
- Local storage for persisting album artwork
Nice! You should add the CSS property `touch-action: none` on your board pieces so the browser doesn’t try to scroll the page when pieces are picked up on mobile. You can learn more about that here: docs.dndkit.com/api-document…