How to use @mozillareality/react-dnd-html5-backend - 2 common examples

import { DropTarget } from "react-dnd";
import { NativeTypes } from "@mozillareality/react-dnd-html5-backend";
import { getFilesFromDragEvent } from "html-dir-content";
import styles from "./AssetDropTarget.scss";

function NativeFileDropTarget({ connectDropTarget, children }) {
  return connectDropTarget(<div>{children}</div>);
}

NativeFileDropTarget.propTypes = {
  connectDropTarget: PropTypes.func,
  children: PropTypes.node
};

export default DropTarget(
  [NativeTypes.DATA_TRANSFER],
  {
    drop(props, monitor) {
      const item = monitor.getItem();

      const filesPromise = getFilesFromDragEvent(item, true);

      if (props.onDropNativeFiles &amp;&amp; !monitor.didDrop()) {
        props.onDropNativeFiles(filesPromise, props.target);
      }

      return item;
    },
    canDrop(props) {
      if (props.target) {
        return !!props.target.isDirectory;
      }

import PropTypes from "prop-types";
import { NativeTypes } from "@mozillareality/react-dnd-html5-backend";
import { DropTarget } from "react-dnd";
import styles from "./AssetDropTarget.scss";

function AssetDropTarget({ connectDropTarget, children }) {
  return connectDropTarget(<div>{children}</div>);
}

AssetDropTarget.propTypes = {
  connectDropTarget: PropTypes.func,
  children: PropTypes.node
};

export default DropTarget(
  ["file", NativeTypes.DATA_TRANSFER],
  {
    drop(props, monitor) {
      const item = monitor.getItem();

      if (props.onDropAsset) {
        props.onDropAsset(item);
      }

      return item;
    }
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  })