Share your creations! 👩‍🎨

[alexreardon]

We would love to see what you have been building with react-beautiful-dnd

Simply respond to this issue!

Things that would be useful:

• a screenshot or gif
• a link to your product/tool if there is one

[alexreardon]

Previous list: #164. I closed that issue a while ago, and rather than resurrecting it I thought why not have a new list!

[yusufameri]

Hi @alexreardon! I have made a mobile/online version of cards against humanity called cardiparty.co. react-beautiful-dnd has been a crucial library in order to make this web app feel native on users mobile browsers!

I just have concern. A lot of my beta users on iOS (iphone) have complained that the touch sensitivity is very poor and at times they cannot drag elements to work. Is there some known issue with this? I am able to get dragging to work for the cards in my game on iphones but the experience is hit or miss (mostly miss) for most ios users and this is preventing my app from being functional for them.

[sarod]

A codesandbox of a re-orderable Material-UI List using beautiful-dnd

[alexreardon]

A codesandbox of a re-orderable Material-UI List using beautiful-dnd

Looks great @sarod! Is there a way to include the edit icon in the draggable so it moves with the item?

[sarod]

Looks great @sarod! Is there a way to include the edit icon in the draggable so it moves with the item?

The edit button is a child of the element passed to Draggable so I assumed this would be automatic. However it seems that material ui RootRef does not provide the ref to the ListItem root container that's what causes the issue. I'll try to look into it.

[AlithAnar]

Hello @alexreardon !

We are currently developing HeySpace app for team collaboration that mix slack and trello.

We are using react-beautiful-dnd in our boards, which sometimes contains lots of lists and tasks, therefore we need some kind of virtualization. The initial render can be very laggy.

[varHarrie]

Todoron, there are still many bugs.😆

[jpsear]

@AlithAnar Wow, HeySpace looks awesome. Nice job guys!

We are using beautiful-dnd on a user story mapping tool we created — Avion:

Virtualisation is huge for us. We can have many droppable zones on a large map and this make dragging sluggish :(

[alexreardon]

Virtualisation is coming soon! #68

We have done a lot of prework for it

[uublive]

hello everyone. First of all, beautiful-dnd is a very good piece of sofware :) We are using it as one of the main elements of our enterprise task management solution called Boards

Boards is the enterprise version or our lighter consumer version Needful

I'm also looking forward for virtualisation. As I understand that it's already being developed by someone else, in the meantime I kind of 'cheated' implementing a fake virtualisation layer that enables us to work with really big kanbans.

Keep up the good work! M

[alexlouden]

Just upgraded to v10.1 on a project I'm working on (the web version of Actions by Moleskine), thought I'd share a screen recording: https://vimeo.com/323033479

I've been sharing some of our progress over on twitter if anyone is interested :) https://twitter.com/alexlouden/status/1104010850216505344

[markdon]

I made a component (MultiTree) based on @atlaskit/tree for rendering multiple lists with tree structures. This came about since @atlaskit/tree was almost perfect for what I was building, except it was only designed to have one Tree and dragging between different Tree components wasn't possible.

There's a few interactions that are a bit weird and I need to look into, but I'm liking how this is going!

I'm also aiming to add list dragging, scrolling inside the lists instead of the whole board (#131 ) and lazy loaded cards or virtualisation (#68 )

[ngyikp]

Not my creation, but I know that Facebook's Gaming Streamer Dashboard uses react-beautiful-dnd :)

[alexreardon]

Super cool @ngyikp. Thanks for the share!

[suanmei]

@AlithAnar Your page is really beautiful, which UI library are you using?

[AlithAnar]

@AlithAnar Your page is really beautiful, which UI library are you using?

We've made it from scratch, no UI library was used. Thanks for your kind words :)

[xuxuzhang1994]

MultiTree

hi Do you have any mature projects to see?

[markdon]

@xuxuzhang1994 This didn't get completed :( #131 means rbd doesn't quite fit our requirements and we have an implementation that behaves more like trello and doesn't support dragging sub-items 😭.

[xuxuzhang1994]

@

@ xuxuzhang1994这没有完成:( ＃131意味着rbd不太符合我们的要求，我们的实现更像trello，不支持拖动子项😭。

@ xuxuzhang1994这没有完成:( ＃131意味着rbd不太符合我们的要求，我们的实现更像trello，不支持拖动子项😭。

Your creations has helped me a lot. Thank you.

[alexreardon]

It turns out slack is using rbd

https://slack.com/libs/desktop

[justrealmilk]

I use it to allow users of Braytech, a third party community tool for Bungie's Destiny 2 action mmo, to customise their default view, Now.

I've broken out different pieces of content into modules which can be rearranged.

Braytech.org

I only use the required onDragEnd handler, and it's my first time, but it's been super cool and easy to do something like this with react and react-beautiful-dnd ✨

[alexreardon]

Great UI design @justrealmilk

[munkhjin0223]

Hey folks! We are working on an open-source project "Erxes". In a Sales Pipeline feature, we are using this package. This is an awesome and unique package while working apps like Trello. Thanks @alexreardon

[castroCrea]

Hello,

Did someone tried to do a calendar with react-beautiful-dnd or a time table ?

[jcrucesdeveloper]

Hey guys, I am developing this by my own. If you want more information don't hesitate on contact me :)

[moubi]

Hi folks.

I have been using rbd in two work projects successfully. What I really like about it is the easiness of having all the drag&drop logic contained within a single component.

Now I decided to give it a go for one of my personal apps. I called it FlowTask - simple yet interactive task board for your mobile browser.

So far It's used for my daily task management on iPhone SE.

Some of the challenges I faced:

• dragging between columns while horizontal scroll is disabled otherwise
• dragging contentEditable elements
• disable drag on Space press
• dragging together with swiping interactions

Thank you @alexreardon and all contributors for maintaining this package.

[mindbet]

Here's the link: https://mychoices.vote/democratic-primary-2020

[dev-assassin]

@alexreardon can i use both of vertical and horizontal drag and drop at the same time in one component? I tried to find the correct package, but i couldn't find them. as seeing your package, i think it's possible to use them. please let me know if you developed that feature.

and in horizontal case, how can i limit the number of items? for example, i'd like to put 3 items in one horizontal zone. in this case, there is API for this?

[synapse]

Hey guys, let me present you Stacks, a kanban like task and project manager

https://stacks.rocks

[lukasbach]

Hi! I've used rbd in my open source notebook app Yana

rbd is used for reordering tabs and for structuring note items. Yana allows you to structure notes in a hierarchical tree view, so you can drag and drop items from one location to another, or just reorder notes within one parent. Yana is highly scalable due to a SQL core, and offers lots of features. You can check it out at yana.js.org!

[2stash]

I just build a simple app that helps you schedule your algorithm studies.