Rendering Virtualization Support

[carlosagsmendes]

Feature request

We are evaluating D&D libraries and we found that some, like React Sortable have virtualization features or, work with libraries such as React Virtualized.

Is rendering virtualization support part of the current plans?

[alexreardon]

We were talking about this the other day. Right now it is not on our roadmap - but it would be cool to see if we could get this working

[ghost]

I'm using react-infinite wrapped with react-sortable-hoc.

That's can be done with react-beautiful-dnd ?

[alexreardon]

Not at this stage - we have not built for it. It would probably require #86 before we could tackle this one

[alexreardon]

This will need to be considered as part of the solution for #86

[OriR]

We're using this library and it works flawlessly!
But we've started to encounter issues when rendering hundreds of complex draggable components, when in fact we need to manage thousands at a time 😞

Is there any way to promote this?

[alexreardon]

Right now we have a few other core features that we are looking to build out. Mobile and auto scrolling. Once those are completed we can re evaluate 👍

[OriR]

@alexreardon Thanks! that would be great!

Unfortunately we do need this right now, so I was thinking of doing a virtualization by hand (removing the elements that are outside the viewport), do you think I would encounter any issues by removing Draggable components? should I do display: none on them instead?

[alexreardon]

I am not sure @OriR as I have not looked into it yet.

You will probably run in to trouble though. The way we do things today is that before a drag officially starts we grab all the dimensions of everything and then proceed from there. So if something is not there - or if it does not have its true dimensions then things will go wrong.

This will be thought of as apart of #86

[OriR]

Thanks!
I'll see how far I can go with this and post the results here in case someone else is interested with an interim solution👍

I also think this should be taken into account when doing #27 since virtualization relies heavily on scrolling.

[alexreardon]

I was hoping to do this with #86 but it will need to wait until after we upgrade to react 16 #192. The current approach of applying styles to the element in place does not play well with virtual lists which have fairly opinionated positioning and layering. By moving to a portal we will be able to play well with virtual lists. I am doing a lot of the pre-work for virtual lists in #86 but virtual lists will not be totally supported. You might be able to get it working if you look at the technique (hack) in #192 which demonstrates how you can set up your own portal.

[OriR]

@alexreardon I see #86 is closed and that #192 is marked with "priority: low" while this is "priority: medium".
Is there any way to extract only the essentials for this issue from #192 ? or is the move to a portal solution the issue itself?
What I'm asking is basically - what's blocking this issue now?

[OmriAharon]

@alexreardon Autoscroll day is celebrated today!
Please make our day and confirm this one is next on the list 🙏

[Frozenlock]

I'm using both react-virtualized and react-beautiful-dnd in my projects. Making them compatible would be heaven.

[dlee]

Right now it is not on our roadmap - but it would be cool to see if we could get this working

Just to confirm, this is now on the roadmap, right?

[alexreardon]

Changes we need need to make:

• Support the adding of draggable and droppable dimensions during a drag (relatively simple)
• Have a mechanism to get around the unmounting of the Draggable item as a user drags. By default it would be unmounted as a user scrolls. We would need to support dragging a clone that we manage and put in a portal to avoid this unmount
• While under the hood it would be worth exploring an api for a Draggable or Droppable to update its dimensions at run time

[tjramage]

We are running react-beautiful-dnd on our production app and, for the most part, it's great! However, there are cases where our users have ~1000+ droppables, and you can really feel the performance / lag. @alexreardon, you mentioned above that you were hopeful to work on this in the coming months – are you able to confirm if this is still the case? 🙏

[pureZjr]

I'm using both react-virtualized and react-beautiful-dnd in my projects. Making them compatible would be heaven.

I'm using both react-virtualized and react-beautiful-dnd in my projects，too. but when i scroll ,it error 'Cannot remove the dragging item during a drag'。you have any solutions，thank you。

[DimitarNestorov]

@pureZjr can you share an example?

[nicubarbaros]

@pureZjr That's how it is designed the library for now. You can remove everything else other than the current dragged item. Check the changelogs of the 10.0 v when it came out

[KhogaEslam]

any updates about using React Virtualized with React Beautiful DnD ?

[dcporter44]

Any updates on this?

[chrbala]

It looks like it'll be in the 12.0 release. https://twitter.com/alexandereardon/status/1138960614447915014

[alexreardon]

It will ship in 12.0. See #1225

[Aarbel]

Thanks a lot @alexreardon for your work ;)

[alexreardon]

#1225 contains the alpha releases which you can use to try this out

[Aarbel]

@alexreardon is it working great under stable version now ?

[alexreardon]

Soon! I am aiming for next week

[Aarbel]

@alexreardon here is a croissant with the hope to see the release soon : 🥐

[nicubarbaros]

@alexreardon Thank you so much for the release!!! You are amazing!

[alexreardon]

This has been released in 12.0 :D

[mbielecki3]

Hello, is there any plan for release new version of https://www.npmjs.com/package/@types/react-beautiful-dnd/v/11.0.3 for this virtualized list feature?