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?

[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.

[icaroscherma]

Fee Spreadsheet Calculator with multiple phases for an Engineering ERP Software:

I couldn't get it to work moving to a different phase using a keyboard yet. 😞

[kodgurkini]

Tab management tool, tabExtend(https://www.tabextend.com). Such a joy working with this lib, keep up the good work.

[clentfort]

I'm building a very simple "tree-editor" over at https://github.com/clentfort/react-beautiful-tree-editor to learn/scratch my own itch.

[guillermodlpa]

Hi there!

I've been implementing https://usequatro.com with react-beautiful-dnd. It's been wonderful. Its accessibility and touch screen support are fantastic. I've pushed its boundaries a little though, using it for general drag and drop to a calendar view as well. More detail below.

Simple drag and drop of tasks within a list:

Dragging into a drop area called Backlog that performs a different action. Only appears while dragging:

Dragging a task from the list view into a calendar view droppable, to create an event for the task:

Dragging the event on the calendar view to change its time:

I'm doing some tricks for the integration between list and calendar, like using a custom placeholder event and manipulating a bit the styles passed in draggableProps. If there was interest in seeing how I've made it, I'd be happy to put together an open source example.

And it works as well on touch screens! 👏 Thank you react-beautiful-dnd team & contributors ♥️

Source code: https://github.com/usequatro/quatro-web-client

EDIT 2022-05-10: code needed to be made private again until discussing a few things with other teammates. Will be made open source soon.

EDIT 2022-07-17: code is open sourced again.

[darrikonn]

Hi there!

We created eloroom using react-beautiful-dnd. It's a platform to create elo-rated competition in any kind of sport or activity. Suitable for workplaces/group of friends to boost morale and strengthen relationships :).

Absolutely love react-beautiful-dnd. I've one issue though with it which I'm trying to sort out: auto-scrolling doesn't work on mobile browser using touch (similar issue: #2003). It works flawlessly on desktop 🤔

Anyway, thanks for this awesome library!

[100terres]

I had fun at work building a sidebar with tree support using rbd 🙂 I also forked rbd to give this project a second life. Here's a blog post about it 🙂

UgnInUu.-.Imgur.mp4

[skychavda]

Hey @guillermodlpa, I am trying to implement similar to what you've done and I try to debug your product as well but didn't find that drag functionality so can you help me with your code. That's how you've done this stepwise dragging.

Thank you.

[guillermodlpa]

Hello @skychavda! I'm glad you found the interaction valuable and you are trying to implement a similar one! We've recently decided to discontinue the project of Quatro, and so we've opened up the codebase for others to learn from. You can check out the code to understand the implementation: https://github.com/usequatro/quatro-web-client. As you'll see, I made a few tricks to get this result. In my opinion, the implementation is too complex to be sustainable, but it works, and I didn't find any other drag and drop library that offered the same smooth interaction both in desktop and mobile. If you have more questions, feel free to open a GitHub issue on that repository.

EDIT 2022-05-10: code needed to be made private again until discussing a few things with other teammates. Will be made open source soon.

EDIT 2022-07-17: code is open sourced again.

[skychavda]

Thank you @guillermodlpa for your support. I will keep in touch with you for any kind of help.

[linkb15]

We use it as a tool to reorder our list 👍🏻 for our website at https://remoter.id

[Raasik007]

Hi, Team how to stop x axis drag allow only to drag y axis any idea or sample code....

[synapse]

Hey everyone. First of all, thank this library!
I am using it all around the app. It was my main dnd library for the board but eventually I had to change it since it would not support nested draggables, but it is still used on every other draggable components.

intro.1.mp4

you can try it out at: https://getstacksapp.com/

[Subhwebninjaz]

@alexreardon
Hi I am facing an issue , My scenario is little complex . Working in Next js.
if you see the attached screenshot

Depth 0 question is : Do you have Card??
Depth 1 questions are : "Card Type ?" and "Card Company?"
Depth 2 questions are : "which Bank" and "CVV number"
Depth 3 question is : "Specify your bank"

Now in Depth 0(Root Level) I can easily reorder the questions also in Depth 1(Child Level) I can easily reorder the questions with the help of react-beautiful-DND but after child level I mean after depth 1 in Any depth i am not able to reorder the questions or items with DND .

Getting wrong destination in when i tried to reorder nested child from depth 2 , but perfectly working in depth 1.
const onDragEnd = (result) => {
const { source, destination } = result;
console.log(source, destination)
}