Крошечный рецепт приготовления react-dnd

Появилась однажды задача - сделать область для загрузки файлов, с помощью drag-and-drop.

Была выбрана библиотека react-dnd, по причине её простоты, минималистичности и низкого порога входа.

Фича реализуется с помощью это либы и двух кастомных компонентов:

• DndContainer - компонент обёртка, для того, чтобы прокидывать вниз контекст для работы react-dnd

• DropTarget - компонент для непосредственной реализации drag-and-drop функционала

Итак, рецепт!

react-dnd

• Документация: react-dnd.

• Примеры использования: раз и два

Просто ставим её в зависимости и идём дальше.

DndContainer

Объявляем провайдер и пробрасываем в children наш будущий компонент DropTarget.

import React from 'react';

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

import DropTarget from '../drop-target';

const DndContainer = (props: {
  onDrop: (files: File[]) => void;
  disabled: boolean;
  title?: string;
  hoverTitle?: string;
}) => {
  const {
    onDrop,
    disabled,
    title = 'Перетащите сюда файлы',
    hoverTitle = 'Отпустите для загрузки',
  } = props;

  return (
    <DndProvider backend={HTML5Backend}>
      <DropTarget
        onDrop={onDrop}
        disabled={disabled}
        title={title}
        hoverTitle={hoverTitle}
      />
    </DndProvider>
  );
};

export default DndContainer;

DropTarget

Компонент для реализации drag-and-drop функционала

import React from 'react';

import { useDrop } from 'react-dnd';
import { NativeTypes } from 'react-dnd-html5-backend';

import Styles from './index.css';

const DropTarget = (props: {
  onDrop: (files: File[]) => void;
  disabled: boolean;
  title: string;
  hoverTitle: string;
}) => {
  const { onDrop, disabled, title, hoverTitle } = props;
  const [{ canDrop, isOver }, drop] = useDrop(
    () => ({
      accept: [NativeTypes.FILE],
      drop: (item: { files: File[] }) => {
        onDrop(item.files);
      },
      canDrop: () => !disabled,
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),
    }),
    [onDrop]
  );
  const isActive = canDrop && isOver;

  return (
    <div ref={drop} className={Styles.wrapper} data-disabled={disabled}>
      <div className={Styles.dropTarget} data-active={isActive}>
        {isActive ? hoverTitle : title}
      </div>
    </div>
  );
};

export default DropTarget;

Стили кастомные, но для примера оставлю:

.wrapper {
  position: relative;
}
.wrapper[data-disabled='true'] {
  cursor: not-allowed;
}
.wrapper[data-disabled='true']::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.35);
}

.dropTarget {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  margin: 20px 0;
  border: 1px dashed black;
  border-radius: 5px;
  user-select: none;
  color: black;
}

.dropTarget[data-active='true'] {
  border: 1px dashed #0022f5;
  color: #0022f5;
}

Применение

Используем как совершенно обычный компонент:

type Props = {
  handleFilesDrop: (files: File[]) => void;
  title?: string;
}
const DnD = (props: Props) => {
  const { handleFilesDrop, title = 'Перетащите сюда медиафайлы' } = props;

  const shouldBeDisabled = /* some condition, based on state/props or whatever you need */;

  return (
    <div className={Styles.dnd}>
      <DndContainer
        title={title}
        onDrop={handleFilesDrop}
        disabled={shouldBeDisabled}
      />
    </div>
  );
};

Итого

Выводов не планировалось, это просто минималистичный рецептик приготовления для быстрого сетапа функционала dnd в приложении))

Спасибо за чтение и удачи в реализации ваших dnd фич)

PS: ссылки из статьи

• про react-dnd

• Примеры использования: раз и два