Создание легковесной библиотеки Tree View в React с ленивой загрузкой, drag & drop и навигацией с клавиатуры

TL;DR: Библиотека lazy-tree-view — это легковесное решение для отображения иерархических данных в React с поддержкой ленивой загрузки, drag & drop и навигации с клавиатуры. Она разработана с учетом минимального веса (~7.5 kB gzipped) и отсутствия зависимостей, что делает ее идеальной для проектов, где важна производительность.

Введение

В современных веб-приложениях часто возникает необходимость отображать иерархические данные: файловые системы, организационные структуры, вложенные меню и т.д. Для таких случаев требуется компонент Tree View, который не только эффективно отображает данные, но и поддерживает функциональность, такую как ленивая загрузка, перетаскивание элементов и навигация с клавиатуры. Однако существующие решения часто оказываются либо слишком тяжеловесными, либо не предоставляют всех необходимых возможностей.

Основная часть

Ленивая загрузка

Ленивая загрузка позволяет загружать данные только тогда, когда это действительно необходимо. В библиотеке lazy-tree-view это реализовано через callback-функцию, которая вызывается при раскрытии узла:

import LazyTreeView from 'lazy-tree-view';

const loadChildren = async (node) => {
  const response = await fetch(`/api/children/${node.id}`);
  return response.json();
};

const TreeComponent = () => (
  <LazyTreeView
    loadChildren={loadChildren}
    renderNode={(node) => <div>{node.name}</div>}
  />
);

Drag & Drop

Перетаскивание элементов реализовано с использованием HTML5 Drag and Drop API. Библиотека поддерживает валидацию drop, что позволяет контролировать, куда можно переместить элемент:

const handleDrop = (sourceNode, targetNode) => {
  if (targetNode.acceptsDrop) {
    // Логика перемещения
  }
};

<TreeComponent onDrop={handleDrop} />

Навигация с клавиатуры

Для обеспечения доступности библиотека поддерживает полную навигацию с клавиатуры, соответствующую стандартам WAI-ARIA:

<TreeComponent
  onKeyDown={(event) => {
    if (event.key === 'ArrowDown') {
      // Логика перехода к следующему элементу
    }
  }}
/>

Императивный API

Для управления деревом извне предоставляется императивный API через ref:

const treeRef = useRef();

const expandAll = () => {
  treeRef.current.expandAll();
};

<TreeComponent ref={treeRef} />

Кастомные рендереры

Библиотека позволяет кастомизировать рендеринг узлов и элементов:

const CustomNodeRenderer = ({ node }) => (
  <div style={{ backgroundColor: node.isSelected ? 'yellow' : 'white' }}>
    {node.name}
  </div>
);

<TreeComponent renderNode={CustomNodeRenderer} />

Практическое применение

Библиотека lazy-tree-view может быть использована в различных сценариях, таких как:

• Файловые менеджеры
• Организационные диаграммы
• Вложенные меню настроек
• Деревья категорий в интернет-магазинах

Пример использования в файловом менеджере:

const loadFiles = async (folder) => {
  const response = await fetch(`/api/files/${folder.id}`);
  return response.json();
};

const FileManager = () => (
  <LazyTreeView
    loadChildren={loadFiles}
    renderNode={(folder) => <div>{folder.name}</div>}
    onDrop={(source, target) => {
      // Логика перемещения файла
    }}
  />
);

Заключение

lazy-tree-view — это мощное и легковесное решение для отображения иерархических данных в React, которое поддерживает ленивую загрузку, перетаскивание и навигацию с клавиатуры. Благодаря минимальному размеру и отсутствию зависимостей, она идеально подходит для проектов, где важны производительность и гибкость. Попробуйте библиотеку в своем проекте и поделитесь обратной связью!

Источник: https://www.reddit.com/r/reactjs/comments/1r8fv73/i_built_a_lightweight_react_tree_view_library/