packages/docsite/markdown/docs/00 Quick Start/FAQ.md
New to React DnD? Read the overview before jumping into the docs.
npm install --save react-dnd
npm install --save react-dnd-html5-backend
See the testing tutorial for examples.
Specify the container node as the dragPreview, but only make the drag handle a dragSource().
See the custom drag handle example.
By default, you can't constrain the drag preview movement because the drag preview is drawn by the browser. You can, however, use a custom drag layer where you're free to rendering anything, with any snapping or constraints.
Both useDrag and useDrop can accept a type argument. This can be changed depending on your prop value, similar to how the useMemo() React built-in hook works.
Both useDrag and useDrop return functions that may be chained against within a node's ref function. For example:
const [, drag] = useDrag(...args)
const [, drop] = useDrop(...args)
return <div ref={(node) => drag(drop(node))}></div>
If you are using the HTML5 backend, you can register a drop target for one of the NativeTypes it exports:
export const TargetBox = ({ onDrop }) => {
const [, drop] = useDrop(
() => ({
accept: [NativeTypes.FILE],
drop(item) {
if (onDrop) {
onDrop(item)
}
}
}),
[onDrop]
)
return <div ref={drop}>Drop Here</div>
}
This is not currently documented, but you can take cues from the HTML5 and Test backend implementations. The backend contract includes setup() and teardown() methods, and connectDragSource(), connectDragPreview() and connectDropTarget() methods that pass the DOM nodes to the backend. Contributions to the documentation are welcome.
React DnD requires React 16.8. Make sure you are using at least that version.
Consider this example:
class Page {
static willTransitionTo(transition, params) {
/* ... */
}
render() {
/* ... */
}
}
export default DragDropContext(HTML5Backend)(Page)
It might surprise you that your route handler's willTransitionTo (or a similar method) won't get triggered in this case! React DnD doesn't proxy your components' static methods and properties. This is too fragile and full of edge cases, so you must do it yourself. To do this, put your statics onto the components returned by React DnD instead:
class Page {
render() {
/* ... */
}
}
Page = DragDropContext(HTML5Backend)(Page)
Page.willTransitionTo = function (transition, params) {
/* ... */
}
export default Page
I know, it's only drag and drop, but I like it.
Stampsy has been using this library, as well as its non-React predecessor that it was based on, since 2013. It's central to the Stampsy user experience, because all the content is created in a drag and drop post editor that uses React DnD.
React DnD was created by Dan Abramov.
Its aim is to expose a powerful API that is browser-agnostic, data-centric, works great with React and Flux, and is testable and extensible. Read The Future of the Drag and Drop API for some context.
It is loosely based on the pre-React code written at Stampsy by Andrew Kuznetsov. Later it received valuable contributions from Alexander Kuznetsov and Nathan Hutchison.
React DnD would not have reached the 1.0 release without the generous donations from:
Gadzhi Kharkharov styled the website, and the fixed-data-table project provided the website template.
Contributing the documentation for the underlying DnD Core library would be a huge help, as it is currently not documented at all, but its concepts leak in some advanced scenarios such as writing tests.
Porting the library to other modern frameworks such as Cycle, Mercury, or Deku, is also appreciated. Such ports would be able to reuse DnD Core logic and the existing backends.
Please let me know via the issue tracker if you create advanced examples such as a Kanban board application, or write a blog post or record a screencast about React DnD, so I can link to it.
While DnD Core is fully tested, React DnD does not currently have any unit tests. Writing them is a great and eagerly desired contribution.
⚛