useDropZone

Hook that provides drop zone functionality

elements

medium

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useDropZone } from '@siberiacancode/reactuse';

Usage

const { overed, files } = useDropZone(ref, options);
// or
const { overed, files } = useDropZone(ref, () => console.log('callback'));
// or
const { ref, overed, files } = useDropZone(options);
// or
const { ref, overed, files } = useDropZone(() => console.log('callback'));

Demo

source

Api

Parameters

Name	Type	Default	Note
target	Target	-	The target element drop zone's
options.dataTypes?	DataTypes	-	The data types
options.multiple?	boolean	-	The multiple mode
options.onDrop?	(files: File[] | null, event: DragEvent) => void	-	The on drop callback function
options.onEnter?	(event: DragEvent) => void	-	The on enter callback function
options.onLeave?	(event: DragEvent) => void	-	The on leave callback function
options.onOver?	(event: DragEvent) => void	-	The on over callback function

Returns

UseDropZoneReturn

Parameters

Name	Type	Default	Note
target	Target	-	The target element drop zone's
callback?	(files: File[] | null, event: DragEvent) => void	-	The callback function to be invoked on drop

Returns

UseDropZoneReturn

Parameters

Name	Type	Default	Note
options.dataTypes?	DataTypes	-	The data types
options.multiple?	boolean	-	The multiple mode
options.onDrop?	(files: File[] | null, event: DragEvent) => void	-	The on drop callback function
options.onEnter?	(event: DragEvent) => void	-	The on enter callback function
options.onLeave?	(event: DragEvent) => void	-	The on leave callback function
options.onOver?	(event: DragEvent) => void	-	The on over callback function

Returns

UseDropZoneReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
callback?	(files: File[] | null, event: DragEvent) => void	-	The callback function to be invoked on drop

Returns

UseDropZoneReturn & { ref: StateRef<Target> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type DropZoneDataTypes = ((types: string[]) => boolean) | string[];

export interface UseDropZoneOptions {
  /** The data types for drop zone */
  dataTypes?: DropZoneDataTypes;
  /** The multiple mode for drop zone */
  multiple?: boolean;
  /** The on drop callback */
  onDrop?: (files: File[] | null, event: DragEvent) => void;
  /** The on enter callback */
  onEnter?: (event: DragEvent) => void;
  /** The on leave callback */
  onLeave?: (event: DragEvent) => void;
  /** The on over callback */
  onOver?: (event: DragEvent) => void;
}

export interface UseDropZoneReturn {
  /** The files that was dropped in drop zone */
  files: File[] | null;
  /** The over drop zone status */
  overed: boolean;
}

export interface UseDropZone {
  (
    target: HookTarget,
    callback?: (files: File[] | null, event: DragEvent) => void
  ): UseDropZoneReturn;

  <Target extends Element>(
    callback?: (files: File[] | null, event: DragEvent) => void,
    target?: never
  ): UseDropZoneReturn & {
    ref: StateRef<Target>;
  };

  (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;

  <Target extends Element>(
    options?: UseDropZoneOptions,
    target?: never
  ): UseDropZoneReturn & {
    ref: StateRef<Target>;
  };
}

Source

Source • Demo

Contributors

D

debabin

B

babin

V

VLADISLAW9