Support react v18 and Strict Mode

[100terres]

Everything that need to be done in order to support react v18 will be tracked in this issue. You can also have a look at the React v18 milestone.

We are in the early stage of the investigation, so the list is not yet exhaustive. New issue will be added as we discover them.

Must have

• Add react and react-dom v18 as peer dependencies #319
• Migrate from Enzyme to @testing-library/react #318
• Run test suite for react v16, v17 and v18 #320
• Support strict mode with react v18 #317

Nice to have

• Run cypress for react v16, v17 and v18 #393

[antoinejaussoin]

Yes please!!

[100terres]

The work is in progress. I'll try to have something working as soon as possible 🙂

[antoinejaussoin]

That's awesome, thanks for the work!! Let me know if I can help with testing in a real-world project.

[jacokok]

Would this include support for strict mode or should we create a new issue for that.

Currently using <React.StrictMode> with react 18 is not working.

[100terres]

Would this include support for strict mode or should we create a new issue for that.

@jacokok it feels like something we'll investigate separately. I'll open a new issue to see how we could support strict mode.

[100terres]

@jacokok I've updated the description of the issue to include strict mode support.

[antoinejaussoin]

Would this include support for strict mode or should we create a new issue for that.

Currently using <React.StrictMode> with react 18 is not working.

Actually that was mainly what I was interested in. Good luck with the work!

[100terres]

The migration from Enzyme to @testing-library/react is going well. There is only one file to refactor. You can follow the progress here: #323

I'll work start to work on Run test suite for react v16, v17 and v18 real soon 🙂

[100terres]

The migration from Enzyme to @testing-library/react is done ✔️

Next step: Run test suite for react v16, v17 and v18 🙂

[Domino987]

Any news on this 🙂 we are blocked with our upgrading to react 18🙉

[Toshinaki]

It's been a while. Any progress on this?🙂

For anyone want a dnd, stop waiting and try this https://github.com/clauderic/dnd-kit
Not easy to use, but very powerful.

[AlimovSV]

Any news?

[AntonOfTheWoods]

Pretty the only reasonable choice is for one of us lurkers to finish the work here, or move to react-dnd...

[jacokok]

@Toshinaki , ok, sorry I missed that it's a drop-in replacement. That is very interesting! Having to reimplement most of the logic can make moving to another lib a massive hassle but if dnd-kit is just point to the new lib and "It Works!", then that is definitely awesome, thanks!

I migrated to dnd-kit. It was not a drop in replacement. It took me a bit longer than anticipated, but works really well.

Check out this comment atlassian/react-beautiful-dnd#2399 (comment) on getting this lib to work with strict mode.

[Will-Babbitt]

I migrated to dnd-kit. It was not a drop in replacement. It took me a bit longer than anticipated, but works really well.

Im trying to do the same now and struggling with getting click events to work with dnd-kit.

[100terres]

Sorry for keeping you all waiting! 😬 I'm still trying to find the time to make it work, but as many of you might have notice it's not an easy fix... and it will take a lot of my free time (outside of work) to support react v18.

I still plan on making it work in the upcoming months, because I need this for a personal project and for work. But if you are in a rush to migrate your codebase to react v18 then I would suggest to not wait for react-forked/dnd to support the latest version of react and move to another library.

If anyone has the time to to do all the refactoring needed I'll be more then happy to review your pull request!

Sorry again and I hope you understand.

[Xhale1]

@100terres I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

We needed our own fork so we could develop new features with a semi-regular cadence, and I intend to further develop the library there.

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here. And no worries on being caught up with life stuff, you don't owe anyone anything. I've certainly left some github issues open for much longer than I'd like before, it happens.

[AntonOfTheWoods]

@100terres I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

We needed our own fork so we could develop new features with a semi-regular cadence, and I intend to further develop the library there.

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here. And no worries on being caught up with life stuff, you don't owe anyone anything. I've certainly left some github issues open for much longer than I'd like before, it happens.

It would have saved me a couple of very annoying days of work if you had posted about this work a couple of weeks ago!

[Xhale1]

It would have saved me a couple of very annoying days of work if you had posted about this work a couple of weeks ago!

Haha, timing could have been a bit better. Did you end up migrating to dnd kit? If so how do you like it compared to react beautiful dnd?

[caleb531]

Hi all,

I've been watching this issue closely, and I would just like to add a few thoughts:

I am using react-beautiful-dnd for one of my projects, and maybe the most important reason I chose it is how natural the interactivity feels. This is best explained in Alex Reardon's blog post that introduces the library:

In react-beautiful-dnd a dragging item's impact is based on its centre of gravity — regardless of where a user grabs an item from. A dragging items impact follows similar rules to a set of scales ⚖️.

This is a mechanic I feel like most other DND libraries get wrong, and something that's largely unique to RBDND. However, it seems that dnd-kit also implements the same behavior, if you play with their examples. So I am encouraged in that respect, in that I might be able to switch to dnd-kit without sacrificing a natural UX.

Of course, it would be great to see react-forked/dnd gain React 18 support, but in the interim, dnd-kit may prove to be a worthy alternative.

[Xhale1]

Of course, it would be great to see react-forked/dnd gain React 18 support, but in the interim, dnd-kit may prove to be a worthy alternative.

@caleb531 I created a fork of this which supports react 18 (it's like two comments up 🙂)

@hello-pangea/dnd

https://github.com/hello-pangea/dnd

[AntonOfTheWoods]

Haha, timing could have been a bit better. Did you end up migrating to dnd kit? If so how do you like it compared to react beautiful dnd?

@Xhale1 react-dnd. I found examples pretty close to what I needed so just went with that. I also found that the touch version actually works fine for the browsers I need on the desktop, so that made things a little simpler. I haven't actually pushed to prod yet though so might even just bite the bullet on that if yours works out of the box migrating from react-beautiful-dnd!

[100terres]

Hi @Xhale1

I'm using react-beautiful-dnd for a few projects that required react 18 and I wasn't sure how progress was coming along so I forked your work and released @hello-pangea/dnd which supports react 18 and strict mode.

Happy to see that you've managed to make it work with react 18! I'll have a look at what you did 🙂 Maybe you've found and fix the issue I was stuck on!

It would never have been possible without your truly amazing work on the original react-beautiful-dnd. I cannot thank you enough for what you've accomplished here.

It was a lot of late night coding, but it was really fun to do. I've learned so much by migrating the repo from Flow to TypeScript and more. Thank you for this recognition 🙂

I might try reach you in the upcoming days!

[100terres]

I might try reach you in the upcoming days!

Hi @Xhale1!

I just send you an email to the gmail address on your GitHub profile page. I sent it from [email protected].

Let me know if you received it 🙂

[100terres]

Thanks to @Xhale1 fork 🙏 I was able to move forward on some of the blockers I faced. If everything continue to go we'll I might able to release a beta version this weekend!

Here's the new pull request to follow: #392

[AntonOfTheWoods]

@100terres I guess the issue is that it is a bit of a risk, given that there was a very long silence, even after several people offered help. Would you consider having others (like @Xhale1 ) as maintainers on this repo?

[Xhale1]

@100terres I guess the issue is that it is a bit of a risk, given that there was a very long silence, even after several people offered help. Would you consider having others (like @Xhale1 ) as maintainers on this repo?

@AntonOfTheWoods I totally get your concern. Gab and I are in touch about maintaining this repo, we'll be providing more details this weekend.

Our current plan is to move this repository to hello-pangea where both he and I will serve as maintainers. I certainly want to help guarantee a strong future for this project 😀 and I'm confident that our working together will be extremely beneficial for this lib

[100terres]

@100terres I guess the issue is that it is a bit of a risk [...] Would you consider having others (like @Xhale1 ) as maintainers on this repo?

As mentioned by @Xhale1 we'll soon have more details for you 🙂 but this project is not dead yet! 🎉

There's always a risk in open source development that a project will go un-maintained, but the beauty is that since the code is freely available, anyone can keep it alive if they have the motivation and the time 🙂

given that there was a very long silence

Again sorry to have disappointed you and let you down. It can be difficult to find the right balance between personal life, work and maintaining a complex open source project. I'll do better in the future and I'm sure that with the help of @Xhale1 we'll be able to prevent this situation from happening again.

[100terres]

This pull request is open (#392). It would help, if some of you have the time to do a review 🙂

It tackles

• Support strict mode with react v18 #317
• Run test suite for react v16, v17 and v18 #320

Once it's merge we'll be ready to release a beta version supporting react 18 and it's new strict mode behavior 🙂

[100terres]

Beta version released!

https://github.com/react-forked/dnd/releases/tag/v15.0.0-beta.0
https://www.npmjs.com/package/@react-forked/dnd/v/15.0.0-beta.0

[100terres]

Version 15.0.0 is now released! It supports react 18, strict mode and drop ie 11. Have fun!

[Xhale1]

@AntonOfTheWoods and others, it's official! @100terres and I are co-maintaining this library as part of the Pangea organization :)

I think y'all will enjoy the results of our consolidated efforts going forward 👍

[AntonOfTheWoods]

Thanks very much to both @Xhale1 and @100terres and sorry for the pressure! Now I will definitely be able to avoid going down the react-dnd path. Awesome!

[AntonOfTheWoods]

It's confirmed, absolutely flawless, drop in replacement for react-beautiful-dnd. You are both legends, thanks!

[RIP21]

One last thing that you guys probably need to do to make it 100% compatible with React 18 is to bump dependedncy of use-memo-one because this one causes peerDependencies issue in React 18 codebase.

└─┬ @hello-pangea/dnd 16.0.0
  └─┬ use-memo-one 1.1.2
    └── ✕ unmet peer react@"^16.8.0 || ^17.0.0": found 18.2.0

Version 1.1.3 fixes that.

[100terres]

@RIP21 I've made a new release v16.0.1 should fix the issue you are facing.