Proper examples for each preset

@clauderic This is a great library but the documentation is quite lacking. The only official example is so much bloated and ridiculously linked.

For instance, The MultipleContainers example in the stories. In the storybook link for the demo, the demos are properly nested and easy to understand what the library is capable of doing, But when you want to understand how it works, Its almost impossible.

The whole sub folder for MultipleContainers exampe in storybook is in MultipleConainers.tsx and it is written in a way that with just props from MultipleContainers.story.tsx, multiple examples can be made but unfortunately when you try to build a component similar to, say MultipleContainers > Basic Setup, there are like a couple dozen of undocumented helper components(Item, Container, ContainerProps) and a ton of props and states and functions which is not used in this specific example.

Please take some time and re-write the examples in separate folders that contains all the needed components inside the folder. This would greatly help the developers and attract more people. This is genuinely a great package and is in par with React-beautiful-dnd or even better than that in performance.

If that’s a lot to ask, atleast make a separate codesandbox for each example. You built the library and I don’t think building already build examples again will be an issue. I can also help in doing so but without proper documentation in the stories, even that’s impossible for me.

Hope you can do something about this.

[nifte]

We really need individual codesandboxes or better documentation for each example in the storybook. Trying to reverse engineer the all-in-one <Sortable /> example component is a nightmare.

[srph]

Hi folks, just leaving this here in case you find it useful. I hacked on it for two mornings so it definitely needs to be cleaned up!

It makes the collision detection more reusable, and might make it simpler to understand. My use-case is much simpler compared to the examples: a sortable grid between multiple containers. The container themselves don’t need to be dragged.