A Tree displays hierarchical data.


  • folder-closeEmpty Folder
  • chevron-rightfolder-openOpen Folder
    • documentItem 1
    • documentItem 2


1import React from "react";
2import { Tree } from "@commure/components-foundation";
4const INITIAL_STATE = [
5 {
6 id: 0,
7 icon: "folder-open",
8 isExpanded: true,
9 label: "Open Folder",
10 childNodes: [
11 {
12 id: 1,
13 icon: "document",
14 label: "Item 1"
15 }
16 ]
17 }
20function MyTree() {
21 return <Tree contents={INITIAL_STATE} />;
24export default MyTree;

The state of a Tree is determined by its contents prop. To make an interactive Tree it must be wrapped in a stateful component to handle updates to contents.

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contentstrueArray<ITreeNode<T>>The data specifying the contents and appearance of the tree.
onNodeClickfalseTreeEventHandler<T>Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.
onNodeCollapsefalseTreeEventHandler<T>Invoked when caret of an expanded node is clicked.
onNodeContextMenufalseTreeEventHandler<T>Invoked when a node is right-clicked or the context menu button is pressed on a focused node.
onNodeDoubleClickfalseTreeEventHandler<T>Invoked when a node is double-clicked. Be careful when using this in combination with an `onNodeClick` (single-click) handler, as the way this behaves can vary between browsers. See
onNodeExpandfalseTreeEventHandler<T>Invoked when the caret of a collapsed node is clicked.
onNodeMouseEnterfalseTreeEventHandler<T>Invoked when the mouse is moved over a node.
onNodeMouseLeavefalseTreeEventHandler<T>Invoked when the mouse is moved out of a node.


Prop NameRequired?TypeDescription
childNodesfalseArray<ITreeNode<T>>Child tree nodes of this node.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contentReffalse(node: TreeNode<T>, element: HTMLDivElement | null) => void
disabledfalsebooleanWhether this tree node is non-interactive. Enabling this prop will ignore mouse event handlers (in particular click, down, enter, leave).
hasCaretfalsebooleanWhether the caret to expand/collapse a node should be shown. If not specified, this will be true if the node has children and false otherwise.
iconfalseIconName | MaybeElementThe name of a Blueprint icon (or an icon element) to render next to the node's label.
idtruestring | numberA unique identifier for the node.
isSelectedfalsebooleanWhether this node is selected.
keyfalsestring | number
labeltruestring | ElementThe main label for the node.
nodeDatafalseTAn optional custom user object to associate with the node. This property can then be used in the `onClick`, `onContextMenu` and `onDoubleClick` event handlers for doing custom logic per node.
onClickfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onCollapsefalse(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onContextMenufalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onDoubleClickfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onExpandfalse(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onMouseEnterfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onMouseLeavefalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
secondaryLabelfalsestring | MaybeElementA secondary label/component that is displayed at the right side of the node.

Related Reading

Blueprint Reference