What about making the item count adaptable to the screen width?

[mathieueveillard]

atlassian/react-beautiful-dnd#316 (comment)

[mathieueveillard]

Hi @cilvet,

I believe this would require to write another HOC that computes the maxItems props and provides it to its child component. Computing maxItems requires information of a single item width (can be provided as prop) as well as the width of the parent container (react-container-dimensions could help). Though, not sure this is so react-ish.

What would be the case leading to this requirement?

Thanks

[davidchappy]

Here's our use case, a responsive grid of fixed-size cards. We'd love to use this library if width auto-detection worked.

Edit:
As a point of reference, react-sortable-hoc works great, except that it suffers from the mobile dragging issue.

[mathieueveillard]

Hi @davidchappy, and thank you for the follow-up and the elements of context.

Definitely, an HOC looks like an appropriate solution. You could use maxItems as key of the wrapped component in order to recreate it each time maxItems updates.

Now I wonder if it should be part of react-beautiful-dnd-grid: I certainly understand your need, but to me, it looks like a separate topic than drag and drop. Proof is the solution I suggest, based on a HOC. Furthermore, some other applications could have different expectations, like shrinking the items width while maintaining the same number of items per row. This could lead to over-generic solutions.

[davidchappy]

Thanks @mathieueveillard. I think that makes a lot of sense technically, but from a practical use perspective it seems that many would need this to be mobile responsive. Perhaps a responsive or fixedWidth flag?