useDropZone

创建一个可以拖拽文件的区域

Usage

实时编辑器

function Demo() {
  const ref = useRef<HTMLDivElement>(null);

  const isOver = useDropZone(ref, (_files) => {});
  return (
    <div>
      <p>将文件拖拽到拖放区域</p>
      <div
        ref={ref}
        style={{
          minHeight: 200,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginTop: "1.5rem",
          background: "rgba(156,163,175,0.1)",
        }}
      >
        <div>是否在拖放区域上方: {JSON.stringify(isOver)}</div>
      </div>
    </div>
  );
};

结果

将文件拖拽到拖放区域

是否在拖放区域上方: false

API

useDropZone

Returns

boolean: 文件是否在区域上

Arguments

参数名	描述	类型	默认值
target	目标元素	BasicTarget<EventTarget> (必填)	-
onDrop	拖拽释放时候的回调	((files: File[] | null) => void) | undefined	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;