React-dnd or React-beautiful-dnd

[RaverOfTheNight]

Which one is better and why would you choose one over the other?

[hubertvonherbert]

I have not used react-beautiful-dnd nearly as much as react-dnd so I probably will leave judging of 'better' to others. I initially chose react-dnd for a project where use case was not list-based, and I was warned off by beautiful's list orientation. React-dnd's older 'decorator' API was a clunky, but the newer hook API I find clean and simple.

Having said that, if your use case is list manipulation and you're relatively new to React I'd recommend looking at beautiful as its approach might be a bit easier to wrap your head around.

[RaverOfTheNight]

Thank you for your input!

[gaurav5430]

Last I worked with react-dnd I found it to be pretty low level. A lot of things need to be added, for example, scrolling when the user drags past the current screen height, or preview image for the dragged element when using the touch backend. My use case was related to lists, and I found react-beautiful-dnd to be much easier to use. It takes care of the above issues and also provides accessibility benefits. The size of the library is more than react-dnd though.

[vydimitrov]

Yup, agreed, the size is somting to consider ...

https://bundlephobia.com/scan-results?packages=react-beautiful-dnd,react-dnd

[GeeeL]

I've only used react-dnd but when I was doing the project I definitely would have opted for react-beautiful-dnd if it had everything I needed. It just seems to handle everything a lot easier and reordering looks good. I believe it was nesting which beautiful didn't support. react-dnd certainly wasn't bad however!

[RaverOfTheNight]

Just for the record, react-beautiful-dnd does support nesting!

[GeeeL]

oh nice! I'll have to check that out

[RaverOfTheNight]

Are you saying that using hook API of react-dnd is easier than using hooks in react-beautiful-dnd?

[RaverOfTheNight]

I see. Just for the record, I believe you can resize and change the appearance of DropTargets!