How to use the react-dnd.DragDropContext function in react-dnd

import React, { useReducer } from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import Button from "./Button";
import GraphView from "./GraphView";

const updater = (current, by) => Math.max(current + by, 0);

// This is really just to demonstrate there's no global state, and that you can
// have multiple graph views
export default DragDropContext(HTML5Backend)(() => {
  const [numGraphViews, incrementGraphViewBy] = useReducer(updater, 1);

  return (
    <>
      <button> incrementGraphViewBy(1)} title="Add Graph View" /&gt;
      </button><button> incrementGraphViewBy(-1)}
        title="Remove Graph View"
      /&gt;
      {Array.from({ length: numGraphViews }, (_, i) =&gt; (
        
      ))}
    
  );
});
</button>

DropTarget,
  DragDropContext
}                                       from 'react-dnd';

import FlipMove from 'react-flip-move';
import Toggle from './Toggle.jsx';
import tiles from '../data/tiles.js';


const BOARD_WIDTH   = 11;
const BOARD_HEIGHT  = 7;
const SQUARE_SIZE   = 56;
const TILE_OFFSET   = 3;
const NUM_SQUARES   = BOARD_WIDTH * BOARD_HEIGHT;

@DragDropContext(HTML5Backend)
class Scrabble extends Component {
  constructor(props) {
    super(props);
    this.state = { tiles }

    this.updateDroppedTilePosition = this.updateDroppedTilePosition.bind(this);
    this.resetTiles = this.resetTiles.bind(this);
  }

  updateDroppedTilePosition({x, y}, tile) {
    // Normally, this would be done through a Redux action, but because this
    // is such a contrived example, I'm just passing the action down through
    // the child.

    // Create a copy of the state, find the newly-dropped tile.
    let stateTiles = this.state.tiles.slice();

>
            
            
            
            {/* TODO: Ian 2018-06-28 All main page modals will go here */}
            

            
          
        
      
    
  )
}

export default DragDropContext(MouseBackEnd)(ProtocolEditor)

import TouchBackend from "react-dnd-touch-backend";

const component = () => null;

const dndComponent = ReactDnd.DragDropContext(TouchBackend)(component);
const dndComponentMouseEvents = ReactDnd.DragDropContext(TouchBackend({enableMouseEvents: true}))(component);
const dndComponentDelayTouchStart = ReactDnd.DragDropContext(TouchBackend({delayTouchStart: 200}))(component);
const dndComponentDelayMouseStart = ReactDnd.DragDropContext(TouchBackend({enableMouseEvents: true, delayMouseStart: 100}));
const dndComponentKeyboardEvents = ReactDnd.DragDropContext(TouchBackend({enableKeyboardEvents: true}));
const dndComponentOldDelay = ReactDnd.DragDropContext(TouchBackend({delay: 300}));
const dndComponentAllCurrentEvents = ReactDnd.DragDropContext(TouchBackend(
    {enableKeyboardEvents: true, enableMouseEvents: true, delayMouseStart: 100, delayTouchStart: 200}));
const dndComponentWithScrollAngleRanges = ReactDnd.DragDropContext(TouchBackend(
    { scrollAngleRanges: [{ start: 0, end: 0 }, { start: 0 }, { end: 0 }] }));
const dndComponentWithTouchSlop = ReactDnd.DragDropContext(TouchBackend({ touchSlop: 0 }));
const dndComponentWithIgnoreContextMenu = ReactDnd.DragDropContext(TouchBackend({ ignoreContextMenu: true }));

) : null;

    return (
      <div>
        <div>
          {tagItems}
          {this.props.inline &amp;&amp; tagInput}
        </div>
        {!this.props.inline &amp;&amp; tagInput}
      </div>
    );
  }
}

module.exports = {
  WithContext: DragDropContext(HTML5Backend)(ReactTags),
  WithOutContext: ReactTags,
  KEYS: KEYS,
};

* under the License.
 *
 */
import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
import { Dimmer, Loader } from 'semantic-ui-react';
import DesignView from 'plugins/ballerina/views/design-view';
import TreeBuilder from 'plugins/ballerina/model/tree-builder';
import FragmentUtils from 'plugins/ballerina/utils/fragment-utils';
import '@ballerina/theme/default-theme/index.js/';
import './scss/themes/default.scss';
import '@ballerina/theme/font-ballerina';

const BallerinaDesignView = DragDropContext(HTML5Backend)(DesignView);

const TREE_MODIFIED = 'tree-modified';

/**
 * A wrapper component to wrap Editable Ballerina Diagram.
 */
class BallerinaDiagramWrapper extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentAST: undefined,
            editMode: true,
            diagramMode: 'action',
        };
        if (props.parseFragment) {

<div> Column or row headers: </div>
          <div> Click: select children headers columns or rows.</div>
          <div>
            Collapse or expand button to hide or show children headers and
            recompute measures.
          </div>
          <div>
            Right and bottom handle drag and drop to resize rows or columns.
          </div>
        
      
    );
  }
}

export default DragDropContext(HTML5Backend)(PivotGridDemo);

function mapStateToProps({ sites, info, posts, categories, pages }) {
  posts = _.omitBy( posts, item => ( item.status !== 'publish' ) );
  pages = _.omitBy( pages, item => ( item.status !== 'publish' ) );

  return {
    posts, categories, pages,
    site: sites[info.domain],
    collectionPrefix: info.collectionPrefix,
  };
}

export default reduxForm({
  form: 'EditMenu',
  validate
})(
  DragDropContext(HTML5Backend)(
    connect(mapStateToProps, { fetchPosts, editMenu, deleteMenu, openSnackbar, startSubmit, stopSubmit })(
      withStyles(styles)(EditMenus)
    )
  )
);

columnId={c.columnId}
                isHidden={c.isHidden}
                moveItem={(srcIndex, destIndex) => this.reorderColumn(srcIndex, destIndex)}
                onClick={() => this.toggleColumn(c.columnId)}>
                {columns.find(i => c.columnId === i.id).name}
              
            ))}
          
        
      
    );
  }
}

export { ColumnHeaderRow as UnconnectedColumnHeaderRow };
export default DragDropContext(HTML5Backend)(ColumnHeaderRow);

this.setState({ end: hoverIndex })
  }

  render () {
    const { steps } = this.state
    return <div>
      
      {steps.map((p, i) =&gt; )}
      
    </div>
  }
}
export default DragDropContext(HTML5Backend)(
  connect(mapStateToProps, mapDispatchToProps)(
    autoCancel({ funcs: ['query'] })(FlowSteps)
  )
)