> For the complete documentation index, see [llms.txt](https://newtons.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://newtons.gitbook.io/knowledge/react-dnd/untitled.md).

# Wrap React-App with React-DND HTML5Backend

Create a component which will wrap react children with React-DND HTML5Backend.

{% code title="DragAndDropProvider.tsx" %}

```
import React from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

export class DragAndDropProvider extends React.Component<{}, {}> {

  constructor (props: any) {
    super(props)
  }

  render (): JSX.Element {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

export default DragDropContext(HTML5Backend)(DragAndDropProvider)

```

{% endcode %}

Wrap the AppRoot with above created DragAndDropProvider.

{% code title="index.ts" %}

```
import DragAndDropProvider from './DragAndDropProvider'

.....
/** Render a component tree composed with the DragAndDropProvider. */
const render = (AppRoot: typeof App) => {
  ReactDOM.render(
    React.createElement(HotContainer, {},
      React.createElement(Router, { history },
        React.createElement(DragAndDropProvider, {},
          React.createElement(AppRoot, {}, null)
        )
      )
    ),
    document.getElementById('app')
  )
}
```

{% endcode %}