5 ms·

Show HN: A React drag-and-drop library

76 points by kutlugsahin 9y ago

hippich 9y ago
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 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 https://github.com/atlassian/react-beautiful-dnd We are still on a lookout for well performing solution for react, yet fully accessible..
- Guillaume86 9y ago
  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 https://github.com/animatedjs/animated). You can use it to update dom styles out of the react render loop.
- kutlugsahin 9y ago
  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
fleetfox 9y ago
What is wrong with react-dnd?
- alexchamberlain 9y ago
  May be better to ask what this does better?
  - jlg23 9y ago
    s/he just did ask that question.
    - alexchamberlain 9y ago
      My request was for the positive reasons to use this library, rather than the negative reasons for not using the other.
- fatbird 9y ago
  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.
- kutlugsahin 9y ago
  Nothing, if it delivers what you need. Maybe the powerful side of react-smooth-dnd is animations that feels like you really moving things.
ishwarn 9y ago
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/react-dnd/react-dnd https://github.com/clauderic/react-sortable-hoc https://github.com/clauderic/react-sortable-hoc
- kutlugsahin 9y ago
  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!
Epskampie 9y ago
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.
- kutlugsahin 9y ago
  Thanks for the feedback. Demo page for mobile devices needs some improvement though.
macawfish 9y ago
Woah! This is a really sweet library. Seriously, the best one I've seen.
- kutlugsahin 9y ago
  Glad you liked it :) cheers!
wuliwong 9y ago
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.
dev360 9y ago
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.
- kutlugsahin 9y ago
  Glad that it helped you! Thanks for sharing your experience. And what was the thing that did't work out with react-sortable-hoc?
  - dev360 9y ago
    I had a list of horizontal pills/badges that wrapped and couldn't get it to look / drop right with react-sortable-hoc.
adar 9y ago
I'm a neophyte at JS, what is the reason for all the code in /dist/index.js to be compacted into one line?
- eat_veggies 9y ago
  It's minified to decrease its file size for faster load times
achikin 9y ago
Looks very cool and API is very simple. I'm going to replace my DIY solution in clojurescript with your component. Thank you!
- kutlugsahin 9y ago
  Thanks! Let me know if you have any problem

76 points by kutlugsahin 9y ago

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 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 https://github.com/atlassian/react-beautiful-dnd We are still on a lookout for well performing solution for react, yet fully accessible..

Guillaume86 9y ago
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 https://github.com/animatedjs/animated). You can use it to update dom styles out of the react render loop.
kutlugsahin 9y ago
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

fleetfox 9y ago

What is wrong with react-dnd?

alexchamberlain 9y ago
May be better to ask what this does better?
- jlg23 9y ago
  s/he just did ask that question.
  - alexchamberlain 9y ago
    My request was for the positive reasons to use this library, rather than the negative reasons for not using the other.
fatbird 9y ago
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.
kutlugsahin 9y ago
Nothing, if it delivers what you need. Maybe the powerful side of react-smooth-dnd is animations that feels like you really moving things.

ishwarn 9y ago

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/react-dnd/react-dnd https://github.com/clauderic/react-sortable-hoc https://github.com/clauderic/react-sortable-hoc

kutlugsahin 9y ago
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!

Epskampie 9y ago

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.

kutlugsahin 9y ago
Thanks for the feedback. Demo page for mobile devices needs some improvement though.

macawfish 9y ago

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

kutlugsahin 9y ago
Glad you liked it :) cheers!

wuliwong 9y ago

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.

dev360 9y ago

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.

kutlugsahin 9y ago
Glad that it helped you! Thanks for sharing your experience. And what was the thing that did't work out with react-sortable-hoc?
- dev360 9y ago
  I had a list of horizontal pills/badges that wrapped and couldn't get it to look / drop right with react-sortable-hoc.

adar 9y ago

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

eat_veggies 9y ago
It's minified to decrease its file size for faster load times

achikin 9y ago

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

kutlugsahin 9y ago
Thanks! Let me know if you have any problem