@alpernative/tree/README.md

[`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) is a high-performance, customizable tree component for React. It provides a wide range of features, including virtualization, drag-and-drop, and nested drag-and-drop support.

## AlperNative Tree

[`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) is a high-performance, customizable tree component for React. It provides a wide range of features, including virtualization, drag-and-drop, and nested drag-and-drop support.

## Features

- **High Performance**: [`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) is designed to handle large datasets with ease, providing smooth and responsive user experiences.
- **Customizable**: [`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) offers a wide range of customization options, allowing you to tailor the appearance and behavior of the tree to your specific needs.
- **Virtualization**: [`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) supports virtualization, enabling you to render only the visible portion of the tree, which can significantly improve performance when working with large datasets.
- **Drag and Drop**: [`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) provides built-in support for drag-and-drop operations, making it easy to rearrange tree nodes.
- **Nested Drag and Drop**: [`@alpernative/tree`](https://www.npmjs.com/package/@alpernative/tree) supports nested drag-and-drop operations, allowing you to move nodes within and between different levels of the tree.

## Getting Started

### Installation

```bash
npm install @alpernative/tree
```

or using yarn:

```bash
yarn add @alpernative/tree
```

### Basic Usage

We need to create `TreeItem.tsx` file to render the tree items

```tsx
import { FC, useState } from 'react';

import { RenderItemParams, TreeItem as TreeItemType } from '@alpernative/tree';
import { AiOutlineFile, AiOutlineFolder, AiOutlineFolderOpen } from 'react-icons/ai';
import { FaChevronRight, FaChevronDown } from 'react-icons/fa';

export const TreeItem: FC<RenderItemParams> = ({ item, provided, onCollapse, onExpand }) => {
  const [isSelected, setIsSelected] = useState(false);

  const renderItemIcon = () => {
    // You can customize the your icons based on the item's properties
    if (!item.hasChildren) return <AiOutlineFile />;
    if (item.isExpanded) return <AiOutlineFolderOpen />;
    return <AiOutlineFolder />;
  };

  const handleOnClick = (item: TreeItemType) => {
    setIsSelected(value => !value);
    if (item.isExpanded) onCollapse(item.id);
    if (!item.isExpanded) onExpand(item.id);
  };

  return (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      onClick={() => handleOnClick(item)}
    >
      <div style={{ color: isSelected ? 'red' : 'gray' }}>
        {item.hasChildren && (item.isExpanded ? <FaChevronDown /> : <FaChevronRight />)}
        {renderItemIcon()}
        {item.data.title}
      </div>
    </div>
  );
};
```

Then we can use the `Tree` component in our `App.tsx` file

```tsx
import { FC, useState } from 'react';

import Tree from '@alpernative/tree';

import { TreeItem } from './TreeItem';

export const basicTreeData = {
  rootId: 'root',
  items: {
    root: {
      id: 'root',
      data: { title: 'Root' },
      children: ['item-0'],
      hasChildren: true,
      isExpanded: true,
      isChildrenLoading: false,
    },
    'item-0': {
      id: 'item-0',
      data: {
        title: 'Item 0',
      },
      children: ['item-1', 'item-2', 'item-3', 'item-4'],
      hasChildren: true,
      isExpanded: true,
      isChildrenLoading: false,
    },
    'item-1': {
      id: 'item-1',
      data: {
        title: 'Item 1',
      },
      children: [],
      hasChildren: false,
      isExpanded: true,
      isChildrenLoading: false,
    },
    'item-2': {
      id: 'item-2',
      data: {
        title: 'Item 2',
      },
      children: [],
      hasChildren: false,
      isExpanded: true,
      isChildrenLoading: false,
    },
    'item-3': {
      id: 'item-3',
      data: {
        title: 'Item 3',
      },
      children: [],
      hasChildren: false,
      isExpanded: true,
      isChildrenLoading: false,
    },
    'item-4': {
      id: 'item-4',
      data: {
        title: 'Item 4',
      },
      children: [],
      hasChildren: false,
      isExpanded: true,
      isChildrenLoading: false,
    },
  },
};

export const App: FC = () => {
  const [treeData, setTreeData] = useState<TreeData>(basicTreeData);

  const onExpand = (ItemId: ItemId) => {
    setTreeData(mutateTree(treeData, ItemId, { isExpanded: true }));
  };

  const onCollapse = (ItemId: ItemId) => {
    setTreeData(mutateTree(treeData, ItemId, { isExpanded: false }));
  };

  const onDragEnd = (source: TreeSourcePosition, destination?: TreeDestinationPosition) => {
    if (!destination) return;

    const newTree = moveItemOnTree(treeData, source, destination);
    setTreeData(newTree);
  };

  return (
    <div style={{ width: 200, height: 300 }}>
      <Tree
        tree={treeData}
        offsetPerLevel={19}
        renderItem={props => <TreeItem {...props} />}
        onExpand={onExpand}
        onCollapse={onCollapse}
        onDragEnd={onDragEnd}
        isNestingEnabled
        isDragEnabled
        virtualItemHeight={24}
        isVirtualizationEnabled
      />
    </div>
  );
};
```

## Examples

Looking for more examples? Check out the [Storybook](https://tree.alpernative.vercel.app/) for a wide range of use cases and customization options.

Do you want more? Check out the [CodeSandbox](https://codesandbox.io/p/sandbox/strange-knuth-k69ykm?file=%2Fsrc%2FApp.tsx%3A10%2C31) for a wide range of use cases and customization options.

## Documentation

For full documentation, visit [Link to Documentation](https://tree.alpernative.vercel.app/).