New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Who uses React DnD? #384
Comments
|
- What products are you using React DnD in? I'm using it on various apps (Kanban board, line of business applications) - How useful do you find it? Before React DnD, I've tried all the DnD solutions I could find, both react and jquery based, and React DnD comes out miles ahead. - How often do you have issues with it, and how frustrating are they? Since 1.0, I haven't encountered any issues. Worth noting that I'm only supporting modern browsers on my products. - Which features do you care about? I'm using all of the features, in different combinations in different areas. - Can you attach a couple of screenshots of your product? |
I just integrated it yesterday with a private project (I can't give screens right now, sorry), and I found the existing documentation superb. The approach is clean, easy to understand, simple to augment, and overall friendly. I haven't really encountered any issues with the kit, honestly. I think its simplicity really is the biggest feature, plus it encourages folks who use it to steer towards best practices like HOCs. |
We use it in our new web console at Treasure Data. I've also used it for personal projects.
Very useful. It's easily the best drag and drop lib I've used. I'm very confident that it can be used to implement sophisticated drag and drop interactions with ease.
Every time I use the library, it takes me a while to remember how it all comes together: where each part goes and what it does. This happens even after having used it multiple times. Perhaps having a visualization to shows all the parts would make it easier to remember. Overall, it seems like the library does everything I need it to do.
Testability! My previous experiences with drag and drop were rather poor, and nobody tested their drag and drop related code. I haven't done any kind of mobile support, but I don't know how I'd target both desktop and mobile. I've seen react-dnd-touch-backend, but I don't know how I'd mix both.
https://gfycat.com/ScientificEvilAmericanbadger This is basically just me playing around. react-dnd makes it trivial to implement the file drop zone. |
codecks.io still in development but close to early-access
A lot. Normalising browser behaviour and offering a react approach to dnd make this library a no brainer for me
Documentation is great, but when starting working with it, I ran into surprising issues where it didn't work without error messages, I couldn't reproduce it reliably but probably had to do with zero-height drag targets.
Browser normalisation, support for touch interactions
|
I have used React DnD in my PhD work on a search engine for medical imaging archives. It allows me to drag search results to become part of the query (yielding similar images). Had there been no library like this, I would have had to mess around with the HTML5 API and make sure it works well alongside React. Anything that lets me focus on more important matters is gold! I've had no serious issues, but the transition from 0.x to 1.x was very confusing and a good example where dist tags were not used properly (1.0.0-rc was released as |
Yeah, this was before I learned how dist-tags work. 😂 |
Using it for a client project that has a lot of drag and drop interaction. Some of the notable components are:
It's also a collaboration tool so most of the interface updates are dispatched to a socket server.
Very useful, it's very easy to separate the dragging logic from your component and test it individually.
We face a lot of problems with the tree view that supports nesting and sorting, One of the bigger issues we experienced was implementing the tree view that supports nesting and sorting. We have different types of nodes (folders, lists). A user can either drop a something on a folder which will cause it to nest or sort it below or above another node. This interaction comes with a lot of flickering, some buggy behavior and occasionally a decrease in performance. See this video: http://s.2to1.be/fAtX, The way it works is as followed:
Currently we use some math (a variation on the sortable example in this repo) to calculate wether or not a node is on or below/above a folder. Initially I tried to make the
See the video above |
I just added react-dnd last week to a (yet to be released) education web app. It is amazing! Thanks so much for your work! The biggest win IMO is that react-dnd provides just the right level of abstraction for managing DnD functionality across the whole app. Besides being able to ditch the awkward combination of isolated, one-size-fits-all drag components (sortable, etc.), I was able to add some drag based functionality in a matter of hours that I had previously written off as too complicated to be worth it (for example, dragging a card to re-sort within its list OR onto a user list icon to show a user list, then dropping it onto the appropriate user). The only issue I've run into so far was in the touch backend, but I was able to make a quick hack to move forward and someone commented they are working on a more general pull request. The main feature I care about given the already wonderful API is solid touch support. Speaking personally of why I don't make pull requests for open source projects (so far, anyway)...I'm a designer. Though I use this tool, for example, my head is naturally thinking about very different kinds of problems. Besides simply not being good at solving issues that arise in libraries like this, it's really not the kind of work I normally do and I wouldn't "trust" my solution. I know there's some amount of selfishness here, but I imagine there's more than a few designers who also happen to code in front-end development who act this way. I'm very grateful for people like you who are willing to help out designers like me with tools that bring the complexities of app development into closer alignment with the complexities of product design so that moving between the domains is less jarring. FYI, I'm using react-dnd in combination with react-flip-move for animating layout changes. It's just been a few days, but they seem to pair great together. |
This totally made my day. ❤️ |
What products are you using React DnD in? How useful do you find it? How often do you have issues with it, and how frustrating are they? Which features do you care about? Can you attach a couple of screenshots of your product? The application functions like a strategy game map editor. You can drag and drop new items onto the map based on a number of rules and move items around the map as well. We are not building an online game, instead using some of the ideas to solve other mapping problems (again, I'm not able to mention yet). Thanks very, very much for a great library! |
This is a life saver if you're using react and have to do dnd stuff. Great work! |
I use React DND in our transport management software. so far I had no issues at all. the user drags the delivery stops around and sees them directly on a map with the calculated distances. |
Drag-and-Dropy block-based CMS (yet another internal beta, launching for a client in April)
Immensely. Though the API isn't exactly as straight-forward as some other 3rd-party components, its super powerful and really lets you do whatever you need.
Rarely and not very frustrating.
Stability and cross-browser bullet-proofness.
|
We use React DnD in the Asana web application, for all places where we use drag-and-drop. Note that, we're currently rewriting our application from our in-house Luna framework to React, and are using React DnD during the re-write in all places where we use drag-and-drop.
We have found it very useful. The API is easy to work with, and allows us to have clear separation of concerns by keeping drag-and-drop contained within a few components.
Other than initial ramp-up, we do not often have issues with it. We use React DnD with TypeScript, and I think writing out the type definitions reduced the ramp-up period for us (since we had to explore the entire API in the process). Now, our issues are generally around testing (e.g. cleanup between tests, in-house helpers to work with the dnd-decorated components, and so on). This is sometimes frustrating, but less so now that we have some general-use components to use or example components to base future ones off of.
Performance, separation of concerns, testability
|
@epelz You should probably get asana to sponsor it otherwise the project is going to slow down |
either https://github.com/Asana or https://github.com/FogCreek, who make Trello which def uses react-dnd, might be great sponsors. |
@gaearon better yet have facebook sponsor it |
The next generation of our UI.
Extremely! I like the docs but it could use more real world examples.
Just encountered an issue when decorating a component with DragSource which is preventing the componentWillUpdate method from executing when props change. Super frustrating so I guess I should file a bug. I'm guessing it's me and not you though. ;)
Performance, stability and touch support.
Not yet, I'm afraid but think lists with reordering and dragging stuff into them from new lists. Quite simple compared to the other examples here. |
We at @teleport use React DnD in our Zen (moving checklist) product for reordering and categorizing the tasks. Also, we just built a reusable tree view component react-dnd-treeview with DnD support implemented using React DnD for use in a currently-internal project. We used react-ui-tree at first but couldn't get the UX right, and we had a positive experience with React DnD, so we implemented our own. The component is in really early stages, so there is no documentation, CI, etc. yet but any feedback would be welcome!
While it took some time to understand the model, the design is really clean and we've pretty much decided to use it everywhere we'd need DnD. So, very useful.
So far we've had 2 issues:
Performance, hiding the quirks of the underlying browsers/platforms.
|
What products are you using React DnD in? How useful do you find it? How often do you have issues with it, and how frustrating are they? Which features do you care about? |
We very nearly used react-dnd for the Slack desktop client, but unfortunately ran into two limitations that turned out to be dealbreakers:
Hopefully that feedback's helpful! I did enjoy working with react-dnd while I was looking into possibly using it in the Slack app, and I'd love to see it overcome these limitations if at all possible. |
We use it in tylio, a new way to create web pages. React-dnd is front and center on the page where you upload your content.
Very useful; It's a bit hard to wrap your head around it at first, as you need to understand all the moving parts at once, but once it clicks you're good to go.
Our case is quite complex, as we're reordering and moving items of different sizes around, and we don't want them to flip-flop around. I had some issues with it, but I guess it was more with how to use it than the library itself.
Pretty much all of them! We use different types of drag sources and drop targets, native files / urls / text, HTML5 & touch backend with custom drag layer.
|
If anybody use it with Typescript, could you provide a basic example? I stuck with this error:
I use it in this way:
|
I dunno if it's too late to chime in, but I wanted to give some (hopefully constructive) feedback. I found React-DnD to be somewhat difficult to grasp (and implement). It has many moving parts and setup is quite involved. I was hoping to have something that's more "plug-n-play." And maybe this is because it tries to be many different things (drag/drop targets, list re-ordering, etc). But I wound up taking a different approach, which was basically just putting up/down buttons on each item and re-ordering that way, combined with react-flip-move to animate the movement. I'd love to see a fork of this that focuses solely on list re-ordering, and keeps it super simple to get it working. |
We're starting to use it on a large-scale proprietary product that is built using React and Redux. We use react-dnd to manage the drag and drop aspects of all things except for SVG elements in the app. It has just the right abstraction layer. In fact, we have something very similar in-house for code that predates React and it is backed by mouse events. The one thing I wish react-dnd has is a backend that's based on mouse events so it works for SVG elements as well. Btw, I'm in the process of writing a flowtype definition for it based on its TypeScript definition, as the existing one on flow-typed is incomplete. |
Wow, lots of input! This is a lot of data to go through! I'm going to close this issue out. Thanks to everyone for taking the time to submit comments! I'm planning on updating some of the documentation in the next few weeks, and one of my thoughts is to create a showcase for projects and applications using React DND. I'll create a follow-up issue to capture those projects when I get around to taking ont he project! |
💜 |
@mnquintana Very interesting feedback- did you and the team end up using another drag and drop library or just build something completely from scratch? |
@mnquintana would be really awesome to learn what you did to overcome this, or better yet, have slack release their dnd library! |
@epelz Need your help. Have you created a reusable drag and drop component to drag the cards in the dashboard and the items in the list or using separate component for cards and list. I would really appreciate if you can reply. |
I know this is a pretty old discussion thread but wanted to contribute anyways. Evernote What products are you using React DnD in? How useful do you find it? How often do you have issues with it, and how frustrating are they? We did have an interesting time hooking into permissions. Our drag and drop for notes requires a lot of things to know whether we can move and/or drop something. We also found we had to reimplement the native fade-out-drag-back to the main DOM element when it didn't find a place to drop ourselves in our CustomDragLayer (this might be an example we can contribute). Which features do you care about? |
@augbog not sure if you've tried it, but have you looked into gaeron's implementation in the first post in issue #14 and using a custom drag layer?
https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html |
Thanks @JM-Mendez yeah we saw that and we were concerned about the follow up comment regarding having multiple components being aware they were being dragged but after rereading it, it actually may not affect us so we're still looking into it :) Thanks for the call out on that! |
Still no backend for cross iframe DnD or parent window to child iframe draggability. @gaearon I saw your comment regarding this issue on a few threads, I would like to say that this is the only reason I had to use pure js solution for my project. (Edit) I think this is a really useful feature for anyone trying to build drag and drop page builder. |
In the past week, I closed a bunch of issues and pushed out a few releases but it’s hard to do this in isolation from understanding the user needs. This project has many stars but when there is an issue, it’s hard to say how many people it impacts, and why we don’t get more pull requests.
The codebase is not documented and can be intimidating to outsiders, which I understand well. Is this the reason why we don’t get more pull requests for fixes? Or is it because the project is not used as widely as stars lead me to believe?
I would like to ask the current users of React DnD to check in here to say a few words.
This will help me understand how this project fits in the ecosystem, and how much of my free time is worth allocating to it. Thanks!
The text was updated successfully, but these errors were encountered: