React Tree Component

API

theme

Set a default theme ui for tree component.

TIP

Each theme has default configurations, but you can override them by declaring specific attributes.

  • Default default

  • Type

enum Theme {
  figma = "figma",
  default = "default",
}
  • Example
<Tree theme="figma" />

icon

Customize treeNode icon.

TIP

If the icon field is of string type, it will be rendered as an img element.

The icon field in the treeData will also be rendered.

  • Default -

  • Type

type icon = string | ReactNode;
  • Example
const icon = () => (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" />
    </svg>
  ),
};

<Tree icon={icon} />;

switcherIcon

The icon displayed when expanding or collapsing.

TIP

For better performance, collapsible effect implemented using checkbox. Therefore, the direction of the passed element needs to be considered.

  • Default ReactNode arrow icon

  • Type

interface switcherIcon {
  (): ReactNode;
}
  • Example
import { DownOne } from "@icon-park/react";
const switcherIcon = () => <DownOne />;

<Tree switcherIcon={switcherIcon} />;

indentSize

Each tree node indentation spacing.

  • Default 15

  • Unit px

  • Type number

foldIconDisplay

When to display the collapse icon.

TIP

If the theme is Figma the value of foldIconDisplay will be set to hover, the collapse icon will be displayed only when the user hovers over the tree node that can be collapsed or expanded.

  • Default -

  • Type

enum FoldIconDisplay {
  always = "always",
  hover = "hover",
}

draggable

Determining whether a treeNode can be dragged or not.

  • Default false

  • Type boolean

checkable

Determining whether display checkbox in each tree node.

  • Default false

  • Type boolean

selectable

Whether a tree node is selectable or not.

TIP

In the default theme, only a single node can be selected.

  • Default true

  • Type boolean

onDragStart

  • Type
type onDragStart = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
}) => void;

onDragEnter

  • Type
type onDragStart = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
}) => void;

onDragEnd

  • Type
type onDragEnd = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
}) => void;

onDragOver

  • Type
type onDragOver = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
}) => void;

onDragLeave

  • Type
type onDragLeave = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
}) => void;

onDrop

  • Type
type onDrop = (params: {
  event: React.SyntheticEvent;
  node: TreeNode;
  dragNodes: TreeNode[];
  dragNodesKeys: TreeNode["anchor"][];
}) => void;

loadData

Insert asynchronously loaded data into the children of a `Node.

  • Type
type loadData = (
  anchor: TreeNode["anchor"],
  key: React.Key,
  children: TreeNode[]
) => Promise;
  • Example

expandAll

If the expand field is not present in the TreeData, expand all nodes by default on initialization.

  • Type boolean

  • Default false