StatefulTree

The StatefulTree component is used to display a tree of items. Useful for defining a tree of categories or subcollections.

  • Category (1)
    • Category (1)
  • Category

Edit the code below to see your changes live!

API

StatefulTree

Prop Name
Type
Default
Description
defaultExpandedstring[]

An array of expanded node ids. Can also be used to reset expanded nodes.

defaultSelectedstring[]

An array of selected node ids. Can also be used to reset selected nodes.

disabledNodesstring[]

An array of disabled node ids. Nodes will not be abled to be selectedable but can still expand/collapse.

iconlessboolean

Hides/shows all icons on the tree.

idstring

Defines a HTML id attribute to the parent wrapper.

nodes *TreeNode[]

Nodes to render in the tree. See below for usage.

onExpandedChange(expandedNodes: string[]) => void

Function that will get called when a tree node is expanded/collapsed. Passes the ids of expanded nodes as an argument.

onNodeClick(event: React.MouseEvent<HTMLLIElement>, nodeId: string) => void

Function that will get called when a tree node is clicked.

onSelectionChange(selectedValues: T[]) => void

Function that will get called when a tree node is selected/deselecteds. Passes the values of selected nodes as an argument.

selectablemulti | radio

Determines the type of selectable tree to render.

Props ending with * are required

StatefulTree[TreeNode]

Prop Name
Type
Default
Description
childrenTreeNode[]

Children for the current node.

iconIcon

Custom icon, in place of the folder icon.

id *string

TreeNode identifier, must be unique.

label *string

Label for the tree node.

valueT

Value of the selected node. A checkbox or radio will not appear if value and selectable is not defined.

Props ending with * are required

Examples

Radio

  • Category

Edit the code below to see your changes live!

Custom Icons

You can replace the folder icon with a custom icon of your choice.

  • Storefront - US

Edit the code below to see your changes live!

Beta