Show HN: A React drag-and-drop library | Hacker News Reader

Show HN: A React drag-and-drop library

github.com

76 pointskutlugsahin23 comments

Some related experience:

At Blackboard we developed yet another DnD library only because existing react solutions were not accessible - https://github.com/blackboard/react-dnd-ax . But unfortunately it is not quite "performant".

Since then I found another promising library which while not fully accessible, provides great deal of keyboard interaction (last time I checked it in February - library is under very active development) - https://github.com/atlassian/react-beautiful-dnd

We are still on a lookout for well performing solution for react, yet fully accessible..

Was your performance issue related to high frequency rerendering in react? If it's the case take a look at animated (https://github.com/animatedjs/animated). You can use it to update dom styles out of the react render loop.

Before I implemented this one the closest candidate for my app was react-beautiful-dnd but currently is does not support "copy" behavior which I need. react-beautiful-dnd relies on react-motion for animations and beside a bigger bundle size, to my experience css hardware accelerated transformations provides more performance. Try them under chrome 6x slowdown performance

Right on. Can you briefly explain differences between this and the popular DnD projects, and in what scenarios someone would use this over those?

https://github.com/react-dnd/react-dnd

https://github.com/clauderic/react-sortable-hoc

Basically I checked both and many others before implementing this one. react-dnd provides and high level API(i.e no animations). react-sortable-hoc has some missing features that I needed. Especially moving things between containers. cheers!

I only went through the demo but it worked really nicely from the user perspective in Chrome. I've only gone as far as to test other react dnd libraries in the same manner but I've never been as excited about them as this. I'll try to work it into something soon. Thanks.

Just tried it on mobile, and must say it works well. Moving stuff including scrolling feels fluent and natural. Nice work, will consider this if I need dnd in react in the future.

Thanks for the feedback. Demo page for mobile devices needs some improvement though.

Thanks for sharing! Just plugged it in for a feature I've been sitting on for a while.

It worked right off the bat for me while react-sortable-hoc did not.

Glad that it helped you! Thanks for sharing your experience. And what was the thing that did't work out with react-sortable-hoc?

I had a list of horizontal pills/badges that wrapped and couldn't get it to look / drop right with react-sortable-hoc.

Looks very cool and API is very simple. I'm going to replace my DIY solution in clojurescript with your component. Thank you!

Thanks! Let me know if you have any problem

Woah! This is a really sweet library. Seriously, the best one I've seen.

Glad you liked it :) cheers!

I'm a neophyte at JS, what is the reason for all the code in /dist/index.js to be compacted into one line?

It's minified to decrease its file size for faster load times

What is wrong with react-dnd?

May be better to ask what this does better?

s/he just did ask that question.

My request was for the positive reasons to use this library, rather than the negative reasons for not using the other.

I just implemented it in a Meteor site using React for the frontend, and it worked beautifully, smoothly, and with perfect React orthodoxy. I was seriously impressed.

Nothing, if it delivers what you need. Maybe the powerful side of react-smooth-dnd is animations that feels like you really moving things.

Reply on news.ycombinator.com