hub / github.com/dgreene1/react-accessible-treeview

github.com/dgreene1/react-accessible-treeview @v2.11.2

repository ↗ · DeepWiki ↗ · release v2.11.2 ↗ · + Follow

129 symbols 395 edges 49 files 0 documented · 0% 3 cross-repo links

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

SEEKING NEW MAINTAINERS

We're looking to give this repository to a new owner. Please see issue https://github.com/dgreene1/react-accessible-treeview/issues/222 to inquire about being the new owner.

react-accessible-treeview

A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.

Features

Single and multiple selection.
Disabled nodes.
Extensive key bindings.
Highly customizable through the use of the render prop and prop getter patterns.
WAI-ARIA compliant.

Documentation and Demo

https://dgreene1.github.io/react-accessible-treeview

Prop Types

Prop name	Type	Default value	Description
`data`	`array[node]`	`required`	Tree data
`nodeRenderer`	`func`	`required`	Render prop for the node (see below for more details)
`onSelect`	`func`	`noop`	Function called when a node changes its selected state
`onNodeSelect`	`func`	`noop`	Function called when a node was manually selected/deselected
`onExpand`	`func`	`noop`	Function called when a node changes its expanded state
`className`	`string`	`""`	className to add to the outermost dom element, al `ul` with `role = "tree"`
`multiSelect`	`bool`	`false`	Allows multiple nodes to be selected
`propagateSelect`	`bool`	`false`	If set to true, selecting a node will also select its descendants
`propagateSelectUpwards`	`bool`	`false`	If set to true, selecting a node will update the state of its parent (e.g. a parent node in a checkbox will be automatically selected if all of its children are selected
`propagateCollapse`	`bool`	`false`	If set to true, collapsing a node will also collapse its descendants
`expandOnKeyboardSelect`	`bool`	`false`	Selecting a node with a keyboard (using Space or Enter) will also toggle its expanded state
`togglableSelect`	`bool`	`false`	Whether the selected state is togglable
`defaultSelectedIds`	`array`	`[]`	Array with the ids of the default selected nodes. Unused if `selectedIds` is provided.
`defaultExpandedIds`	`array`	`[]`	Array with the ids of the default expanded nodes. Unused if `expandedIds` is provided.
`defaultDisabledIds`	`array`	`[]`	Array with the ids of the default disabled nodes
`selectedIds`	`array`	`[]`	(Controlled) Array with the ids that should be selected
`expandedIds`	`array`	`[]`	(Controlled) Array with the ids of branch node that should be expanded
`clickAction`	`enum`	`SELECT`	Action to perform on click. One of: EXCLUSIVE_SELECT, FOCUS, SELECT
`onBlur`	`func`	`noop`	Custom onBlur event that is triggered when focusing out of the component as a whole (moving focus between the nodes won't trigger it).

data

An array of nodes. Nodes are objects with the following structure:

Property	Type	Default	Description
`id`	`number` or `string`	required	A nonnegative integer or string that uniquely identifies the node
`name`	`string`	required	Used to match on key press
`children`	`array[id]`	required	An array with the ids of the children nodes.
`parent`	`id`	required	The parent of the node. `null` for the root node
`isBranch`	`boolean`	optional	Used to indicated whether a node is branch to be able load async data onExpand, default is false
`metadata`	`object`	optional	Used to add metadata into node object. We do not currently support metadata that is a nested object

The item with parent:null of the array represents the root node and won't be displayed.

Example:

js static const data = [ { name: "", children: [1, 4, 9, 10, 11], id: 0, parent: null }, { name: "src", children: [2, 3], id: 1, parent: 0 }, { name: "index.js", id: 2, parent: 1 }, { name: "styles.css", id: 3, parent: 1 }, { name: "node_modules", children: [5, 7], id: 4, parent: 0 }, { name: "react-accessible-treeview", children: [6], id: 5, parent: 4 }, { name: "bundle.js", id: 6, parent: 5 }, { name: "react", children: [8], id: 7, parent: 4 }, { name: "bundle.js", id: 8, parent: 7 }, { name: ".npmignore", id: 9, parent: 0 }, { name: "package.json", id: 10, parent: 0 }, { name: "webpack.config.js", id: 11, parent: 0 }, ];

The array can also be generated from a nested object using the flattenTree helper (see the examples below). flattenTree preserves metadata.

Data supports non-sequential ids provided by user.

nodeRenderer

Arguments: An object containing the following properties:

Property	Type	Description
`element`	`object`	The object that represents the rendered node
`getNodeProps`	`function`	A function which gives back the props to pass to the node
`isBranch`	`bool`	Whether the rendered node is a branch node
`isSelected`	`bool`	Whether the rendered node is selected
`isHalfSelected`	`bool` or `undefined`	If the node is a branch node, whether it is half-selected, else undefined
`isExpanded`	`bool` or `undefined`	If the node is a branch node, whether it is expanded, else undefined
`isDisabled`	`bool`	Whether the rendered node is disabled
`level`	`number`	A positive integer that corresponds to the aria-level attribute
`setsize`	`number`	A positive integer that corresponds to the aria-setsize attribute
`posinset`	`number`	A positive integer that corresponds to the aria-posinset attribute
`handleSelect`	`function`	Function to assign to the onClick event handler of the element(s) that will toggle the selected state
`handleExpand`	`function`	Function to assign to the onClick event handler of the element(s) that will toggle the expanded state
`dispatch`	`function`	Function to dispatch actions
`treeState`	`object`	state of the treeview

onSelect

Arguments: onSelect({element, isBranch, isExpanded, isSelected, isHalfSelected, isDisabled, treeState }) Note: the function uses the state after the selection.

onNodeSelect

Arguments: onNodeSelect({element, isBranch, isSelected, treeState }) Note: the function uses the state right after the selection before propagation.

onExpand

Arguments: onExpand({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState}) Note: the function uses the state after the expansion.

onLoadData

Arguments: onLoadData({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState}) Note: the function uses the state after inital data is loaded and on expansion.

Keyboard Navigation

Follows the same conventions described in https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1b.html and https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-22.

Key	Function
`Enter` or `Space`	Updates the selected node to the current node and triggers `onSelect`
`Down Arrow`	Moves focus to the next node that is tabbable without opening or closing a node. If focus is on the last node, does nothing.
`Up arrow`	Moves focus to the previous node that is tabbable without opening or closing a node. If focus is on the first node, does nothing.
`Right Arrow`	When focus is on a closed node, opens the node; focus does not move. When focus is on an end node, does nothing. When focus is on a open node, moves focus to the first child node.
`Left Arrow`	When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a

Extension points exported contracts — how you extend this code

ITreeViewState (Interface)

(no doc)

src/TreeView/reducer.ts

TreeViewOnNodeSelectProps (Interface)

(no doc)

src/__tests__/TreeViewOnNodeSelect.test.tsx

ITreeNode (Interface)

(no doc)

src/TreeView/utils.ts

TreeViewDataTypeProps (Interface)

(no doc)

src/__tests__/TreeViewNodeId.test.tsx

INodeProps (Interface)

(no doc)

src/TreeView/node.tsx

ControlledExpandedProps (Interface)

(no doc)

src/__tests__/ControlledExpandedNode.test.tsx

INodeGroupProps (Interface)

(no doc)

src/TreeView/node.tsx

TreeViewOnSelectProps (Interface)

(no doc)

src/__tests__/TreeViewOnSelect.test.tsx

Core symbols most depended-on inside this repo

flattenTree

called by 39

src/TreeView/utils.ts

getTreeNode

called by 27

src/TreeView/utils.ts

isBranchNode

called by 17

src/TreeView/utils.ts

getTreeParent

called by 13

src/TreeView/utils.ts

handleSelect

called by 13

src/TreeView/node.tsx

getParent

called by 9

src/TreeView/utils.ts

difference

called by 8

src/TreeView/utils.ts

getDescendants

called by 8

src/TreeView/utils.ts

Shape

Function 108

Interface 21

Languages

TypeScript100%

Modules by API surface

src/TreeView/utils.ts38 symbols

src/TreeView/node.tsx11 symbols

src/TreeView/index.tsx8 symbols

website/docs/examples/MultiSelectCheckboxControlled/index.js5 symbols

website/docs/examples/Filtering/index.js5 symbols

website/docs/examples/MultiSelectCheckdoxAsyncControlled/index.js4 symbols

src/__tests__/TreeViewOnNodeSelect.test.tsx4 symbols

src/__tests__/MultiSelectCheckboxTreeAsyncControlled.test.tsx4 symbols

src/__tests__/MultiSelectCheckboxTreeAsync.test.tsx4 symbols

src/__tests__/ControlledTree.test.tsx4 symbols

website/docs/examples/MultiSelectCheckboxDisabled/index.js3 symbols

website/docs/examples/MultiSelectCheckboxAsync/index.js3 symbols

Used by 3 indexed graphs manifest dependencies, hub-wide

github.com/blinkospace/blinko

github.com/supabase/supabase

github.com/wasp-lang/wasp

For agents

$ claude mcp add react-accessible-treeview \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact