Added DashboardWithoutDndContext export in Dashboard component

README.md

@@ -86,6 +86,51 @@ class App extends Component {
 }
 ```
 
+Dazzle uses [react-dnd](https://github.com/react-dnd/react-dnd). The default _Dashboard_ component of Dazzle is wrapped by [_DragDropContext_](https://react-dnd.github.io/react-dnd/docs-drag-drop-context.html) of react-dnd.
+So you may want to use react-dnd in your React component hierarchy upper than where you use the _Dashboard_ component of Dazzle. If you do so then you can't let Dazzle creating the _DragDropContext_ because you want to create it yourself upper in the React component hierarchy of your application.
+So forth please use the _DashboardWithoutDndContext_ component of Dazzle and wrapped your own component with _DragDropContext(HTML5Backend)_:
+```javascript
+import React, { Component } from 'react';
+import { DashboardWithoutDndContext } from 'react-dazzle';
+
+// react-dnd
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+// Your widget. Just another react component.
+import CounterWidget from './widgets/CounterWidget';
+
+// Default styles.
+import 'react-dazzle/lib/style/style.css';
+
+class App extends Component {
+  constructor() {
+    this.state = {      
+      widgets: {
+        WordCounter: {
+          type: CounterWidget,
+          title: 'Counter widget',
+        }
+      },
+      layout: {
+        rows: [{
+          columns: [{
+            className: 'col-md-12',
+            widgets: [{key: 'WordCounter'}],
+          }],
+        }],
+      }
+    };
+  }
+
+  render() {
+    return <DashboardWithoutDndContext  widgets={this.state.widgets} layout={this.state.layout}  />
+  }
+}
+
+export default DragDropContext(HTML5Backend)(App);
+```
+
 ## API
 | Props | Type| Description | Required |
 | --- | --- | --- | --- |

lib/components/Dashboard.js

@@ -8,7 +8,6 @@ import LayoutRenderer from './LayoutRenderer';
  * Main dashboard component. This is where all of this starts.
  */
 /* eslint react/prefer-stateless-function: "off" */
-@DragDropContext(HTML5Backend)
 class Dashboard extends Component {
   render() {
     return (
@@ -88,4 +87,5 @@ Dashboard.propTypes = {
   onMove: PropTypes.func,
 };
 
-export default Dashboard;
+export { Dashboard as DashboardWithoutDndContext };
+export default DragDropContext(HTML5Backend)(Dashboard);

lib/index.js

@@ -1,2 +1,2 @@
-export { default as default } from './components/Dashboard';
+export { default as default, DashboardWithoutDndContext as DashboardWithoutDndContext } from './components/Dashboard';
 export { addWidget } from './util';