{"id":19700072,"url":"https://github.com/dgreene1/react-accessible-treeview","last_synced_at":"2025-05-14T18:02:25.292Z","repository":{"id":35056371,"uuid":"199916764","full_name":"dgreene1/react-accessible-treeview","owner":"dgreene1","description":"A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.","archived":false,"fork":false,"pushed_at":"2025-04-01T20:20:00.000Z","size":4546,"stargazers_count":314,"open_issues_count":10,"forks_count":44,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T03:03:46.969Z","etag":null,"topics":["a11y","accessibility","react","react-components","tree","tree-structure","treeview"],"latest_commit_sha":null,"homepage":"https://dgreene1.github.io/react-accessible-treeview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dgreene1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-31T19:26:58.000Z","updated_at":"2025-05-02T15:13:48.000Z","dependencies_parsed_at":"2023-02-17T22:00:49.070Z","dependency_job_id":"c18a8a6a-5bc5-42b5-84e8-1ba729c27470","html_url":"https://github.com/dgreene1/react-accessible-treeview","commit_stats":{"total_commits":442,"total_committers":21,"mean_commits":"21.047619047619047","dds":0.7624434389140271,"last_synced_commit":"61bc1ffde41352329795bb93916e55ae0a2a40e4"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreene1%2Freact-accessible-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreene1%2Freact-accessible-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreene1%2Freact-accessible-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreene1%2Freact-accessible-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgreene1","download_url":"https://codeload.github.com/dgreene1/react-accessible-treeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198453,"owners_count":22030964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","react","react-components","tree","tree-structure","treeview"],"created_at":"2024-11-11T21:03:05.633Z","updated_at":"2025-05-14T18:02:25.271Z","avatar_url":"https://github.com/dgreene1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-accessible-treeview [![Build Status](https://travis-ci.org/lissitz/react-accessible-treeview.svg?branch=master)](https://travis-ci.org/lissitz/react-accessible-treeview) [![Greenkeeper badge](https://badges.greenkeeper.io/lissitz/react-accessible-treeview.svg)](https://greenkeeper.io/) [![npm version](https://badge.fury.io/js/react-accessible-treeview.svg)](https://badge.fury.io/js/react-accessible-treeview) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nA react component that implements the treeview pattern as described by the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#TreeView).\n\n### Features\n\n- Single and multiple selection.\n- Disabled nodes.\n- Extensive key bindings.\n- Highly customizable through the use of the render prop and prop getter patterns.\n- WAI-ARIA compliant.\n\n### Documentation and Demo\n\n- https://dgreene1.github.io/react-accessible-treeview\n\n## Prop Types\n\n| Prop name | Type | Default value | Description |\n| ------------------------ | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `data` | `array[node]` | `required` | Tree data |\n| `nodeRenderer` | `func` | `required` | Render prop for the node (see below for more details) |\n| `onSelect` | `func` | `noop` | Function called when a node changes its selected state |\n| `onNodeSelect` | `func` | `noop` | Function called when a node was manually selected/deselected |\n| `onExpand` | `func` | `noop` | Function called when a node changes its expanded state |\n| `className` | `string` | `\"\"` | className to add to the outermost dom element, al `ul` with `role = \"tree\"` |\n| `multiSelect` | `bool` | `false` | Allows multiple nodes to be selected |\n| `propagateSelect` | `bool` | `false` | If set to true, selecting a node will also select its descendants |\n| `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 |\n| `propagateCollapse` | `bool` | `false` | If set to true, collapsing a node will also collapse its descendants |\n| `expandOnKeyboardSelect` | `bool` | `false` | Selecting a node with a keyboard (using Space or Enter) will also toggle its expanded state |\n| `togglableSelect` | `bool` | `false` | Whether the selected state is togglable |\n| `defaultSelectedIds` | `array` | `[]` | Array with the ids of the default selected nodes. Unused if `selectedIds` is provided. |\n| `defaultExpandedIds` | `array` | `[]` | Array with the ids of the default expanded nodes. Unused if `expandedIds` is provided. |\n| `defaultDisabledIds` | `array` | `[]` | Array with the ids of the default disabled nodes |\n| `selectedIds` | `array` | `[]` | (Controlled) Array with the ids that should be selected |\n| `expandedIds` | `array` | `[]` | (Controlled) Array with the ids of branch node that should be expanded |\n| `clickAction` | `enum` | `SELECT` | Action to perform on click. One of: EXCLUSIVE_SELECT, FOCUS, SELECT |\n| `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). |\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## data\n\nAn array of nodes. Nodes are objects with the following structure:\n\n| Property | Type | Default | Description |\n| ---------- | -------------------- | -------- | --------------------------------------------------------------------------------------------------- |\n| `id` | `number` or `string` | required | A nonnegative integer or string that uniquely identifies the node |\n| `name` | `string` | required | Used to match on key press |\n| `children` | `array[id]` | required | An array with the ids of the children nodes. |\n| `parent` | `id` | required | The parent of the node. `null` for the root node |\n| `isBranch` | `boolean` | optional | Used to indicated whether a node is branch to be able load async data onExpand, default is false |\n| `metadata` | `object` | optional | Used to add metadata into node object. We do not currently support metadata that is a nested object |\n\nThe item with `parent:null` of the array represents the root node and won't be displayed.\n\nExample:\n\n```js static\nconst data = [\n { name: \"\", children: [1, 4, 9, 10, 11], id: 0, parent: null },\n { name: \"src\", children: [2, 3], id: 1, parent: 0 },\n { name: \"index.js\", id: 2, parent: 1 },\n { name: \"styles.css\", id: 3, parent: 1 },\n { name: \"node_modules\", children: [5, 7], id: 4, parent: 0 },\n { name: \"react-accessible-treeview\", children: [6], id: 5, parent: 4 },\n { name: \"bundle.js\", id: 6, parent: 5 },\n { name: \"react\", children: [8], id: 7, parent: 4 },\n { name: \"bundle.js\", id: 8, parent: 7 },\n { name: \".npmignore\", id: 9, parent: 0 },\n { name: \"package.json\", id: 10, parent: 0 },\n { name: \"webpack.config.js\", id: 11, parent: 0 },\n];\n```\n\nThe array can also be generated from a nested object using the `flattenTree` helper (see the examples below). `flattenTree` preserves `metadata`.\n\nData supports non-sequential ids provided by user.\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## nodeRenderer\n\n- _Arguments_: An object containing the following properties:\n\n| Property | Type | Description |\n| ---------------- | --------------------- | ----------------------------------------------------------------------------------------------------- |\n| `element` | `object` | The object that represents the rendered node |\n| `getNodeProps` | `function` | A function which gives back the props to pass to the node |\n| `isBranch` | `bool` | Whether the rendered node is a branch node |\n| `isSelected` | `bool` | Whether the rendered node is selected |\n| `isHalfSelected` | `bool` or `undefined` | If the node is a branch node, whether it is half-selected, else undefined |\n| `isExpanded` | `bool` or `undefined` | If the node is a branch node, whether it is expanded, else undefined |\n| `isDisabled` | `bool` | Whether the rendered node is disabled |\n| `level` | `number` | A positive integer that corresponds to the aria-level attribute |\n| `setsize` | `number` | A positive integer that corresponds to the aria-setsize attribute |\n| `posinset` | `number` | A positive integer that corresponds to the aria-posinset attribute |\n| `handleSelect` | `function` | Function to assign to the onClick event handler of the element(s) that will toggle the selected state |\n| `handleExpand` | `function` | Function to assign to the onClick event handler of the element(s) that will toggle the expanded state |\n| `dispatch` | `function` | Function to dispatch actions |\n| `treeState` | `object` | state of the treeview |\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## onSelect\n\n- _Arguments_: `onSelect({element, isBranch, isExpanded, isSelected, isHalfSelected, isDisabled, treeState })`\n Note: the function uses the state _after_ the selection.\n\n## onNodeSelect\n\n- _Arguments_: `onNodeSelect({element, isBranch, isSelected, treeState })`\n Note: the function uses the state right _after_ the selection before propagation.\n\n## onExpand\n\n- _Arguments_: `onExpand({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState})`\n Note: the function uses the state _after_ the expansion.\n\n## onLoadData\n\n- _Arguments_: `onLoadData({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState})`\n Note: the function uses the state _after_ inital data is loaded and on expansion.\n \u003cbr/\u003e \u003cbr/\u003e\n\n## Keyboard Navigation\n\nFollows 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.\n\n| Key | Function |\n| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `Enter` or `Space` | Updates the selected node to the current node and triggers `onSelect` |\n| `Down Arrow` | \u003cul\u003e\u003cli\u003eMoves focus to the next node that is tabbable without opening or closing a node.\u003c/li\u003e \u003cli\u003eIf focus is on the last node, does nothing.\u003c/li\u003e\u003c/ul\u003e |\n| `Up arrow` | \u003cul\u003e\u003cli\u003e Moves focus to the previous node that is tabbable without opening or closing a node. \u003c/li\u003e\u003cli\u003e If focus is on the first node, does nothing.\u003c/li\u003e\u003c/ul\u003e |\n| `Right Arrow` | \u003cul\u003e\u003cli\u003eWhen focus is on a closed node, opens the node; focus does not move.\u003c/li\u003e \u003cli\u003e When focus is on an end node, does nothing.\u003c/li\u003e\u003cli\u003e When focus is on a open node, moves focus to the first child node. \u003c/li\u003e\u003c/ul\u003e |\n| `Left Arrow` | \u003cul\u003e \u003cli\u003eWhen focus is on an open node, closes the node.\u003c/li\u003e \u003cli\u003eWhen focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.\u003c/li\u003e \u003cli\u003e When focus is on a root node that is also either an end node or a closed node, does nothing.\u003c/li\u003e \u003c/ul\u003e |\n| `Home` | Moves focus to first node without opening or closing a node. |\n| `End` | Moves focus to the last node that can be focused without expanding any nodes that are closed. |\n| `a-z, A-Z` | \u003cul\u003e \u003cli\u003eFocus moves to the next node with a name that starts with the typed character.\u003c/li\u003e \u003cli\u003eSearch wraps to first node if a matching name is not found among the nodes that follow the focused node.\u003c/li\u003e \u003cli\u003eSearch ignores nodes that are descendants of closed nodes.\u003c/li\u003e \u003c/ul\u003e |\n| `*` (asterisk) | \u003cul\u003e\u003cli\u003e Expands all closed sibling nodes that are at the same level as the focused node.\u003c/li\u003e\u003cli\u003e Focus does not move.\u003c/li\u003e\u003c/ul\u003e |\n| `Shift + Down Arrow` | Moves focus to and toggles the selection state of the next node. |\n| `Shift + Up Arrow` | Moves focus to and toggles the selection state of the previous node. |\n| `Ctrl + A` | Selects all nodes in the tree. If all nodes are selected, unselects all nodes. |\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## Mouse Navigation\n\n| Key | Function |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `Click` | Toggles parent nodes and also performs one of `clickActions = SELECT, EXCLUSIVE_SELECT, FOCUS` |\n| `Ctrl+Click` | If `multiselect` is set to `true`, selects the node without dropping the current selected ones. If false, it selects the clicked node. Doesn't toggle parents. |\n| `Shift+Click` | If `multiselect` is set to `true`, selects from the node without dropping the current selected ones. If false, it focus the clicked node. Doesn't toggle parents. |\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## Click actions\n\n| Variant | Function |\n| ------------------ | ------------------------------------------------ |\n| `SELECT` | Selects the clicked node (default). |\n| `EXCLUSIVE_SELECT` | Selects the clicked node and deselects the rest. |\n| `FOCUS` | Focuses the clicked node |\n\n\u003cbr/\u003e \u003cbr/\u003e\n\n## treeState\n\nThe internal state of the component.\n\n| Property | Type | Default | Description |\n| ------------------- | ---------------- | -------------------------------- | ----------------------------------------------------- |\n| selectedIds | `Set` | `new Set(defaultSelectedIds)` | Set of the ids of the selected nodes |\n| controlledIds | `Set` | `new Set(controlledSelectedIds)` | Set of the ids of the nodes selected programmatically |\n| tabbableId | `number` | `data[0].children[0]` | Id of the node with tabindex = 0 |\n| isFocused | `bool` | `false` | Whether the tree has focus |\n| expandedIds | `Set` | `new Set(defaultExpandedIds)` | Set of the ids of the expanded nodes |\n| halfSelectedIds | `Set` | `new Set()` | Set of the ids of the selected nodes |\n| lastUserSelect | `number` | `data[0].children[0]` | Last selection made directly by the user |\n| lastInteractedWith | `number or null` | `null` | Last node interacted with |\n| lastManuallyToggled | `number or null` | `null` | Last node that was manually selected/deselected |\n| disabledIds | `Set` | `new Set(defaultDisabledIds)` | Set of the ids of the selected nodes |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgreene1%2Freact-accessible-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgreene1%2Freact-accessible-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgreene1%2Freact-accessible-treeview/lists"}