New to React DnD? Read the overview before jumping into the docs.

DndProvider

The DndProvider component provides React-DnD capabilities to your application. This must be injected with a backend via the backend prop, but it may can be injected with a window object.

Usage

import HTML5Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

Props

  • backend: Required. A React DnD backend. Unless you're writing a custom one, you probably want to use the HTML5 backend that ships with React DnD.
  • context: Optional. The backend context used to configure the backend. This is dependent on the backend implementation.
  • options: Optional. An options object used to configure the backend. This is dependent on the backend implementation.