{"id":22338360,"url":"https://github.com/alekseymakhankov/hyper-tree","last_synced_at":"2025-07-29T22:33:39.025Z","repository":{"id":42080603,"uuid":"240740733","full_name":"alekseymakhankov/hyper-tree","owner":"alekseymakhankov","description":"React treeview component","archived":false,"fork":false,"pushed_at":"2023-02-04T10:08:04.000Z","size":2117,"stargazers_count":68,"open_issues_count":14,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-29T00:05:52.513Z","etag":null,"topics":["custom-hook","react","react-component","react-hooks","reactjs","tree","tree-structure","treeview"],"latest_commit_sha":null,"homepage":null,"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/alekseymakhankov.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}},"created_at":"2020-02-15T15:45:44.000Z","updated_at":"2024-10-06T05:22:34.000Z","dependencies_parsed_at":"2023-02-08T06:31:13.168Z","dependency_job_id":null,"html_url":"https://github.com/alekseymakhankov/hyper-tree","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alekseymakhankov%2Fhyper-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alekseymakhankov","download_url":"https://codeload.github.com/alekseymakhankov/hyper-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228054426,"owners_count":17862129,"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":["custom-hook","react","react-component","react-hooks","reactjs","tree","tree-structure","treeview"],"created_at":"2024-12-04T06:14:00.481Z","updated_at":"2024-12-04T06:14:01.109Z","avatar_url":"https://github.com/alekseymakhankov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React hyper tree\n\n#### Fully customizable tree view react component\n\nWelcome to the react hyper tree component 😄\nI want to introduce you to an awesome react component for displaying tree data structure\n\n![dependecies](https://img.shields.io/badge/dependecies-no%20dependencies-green.svg)\n![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)\n![min](https://img.shields.io/bundlephobia/min/react-hyper-tree)\n![minzip](https://img.shields.io/bundlephobia/minzip/react-hyper-tree)\n\n## Features\n\n-   render tree-like data structure\n-   show/hide lines\n-   fully custom component by providing render functions (node and drag zone) or custom class names\n-   tree management by global utility (treeHandlers)\n-   single/multiple node selection\n-   async loading of children\n-   drag and drop using 3 types of insertion (before, children, after)\n\n## Table of contents\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Properties](#properties)\n-   [API](#use-tree-state)\n    -   [useTreeState API](#use-tree-state)\n    -   [Node API](#node-api)\n    -   [Global State Manager (GSM)](#global-state-manager)\n    -   [Async children](#async-children)\n    -   [Default properties](#default-props)\n-   [Road map](#road-map)\n-   [Contributing](#contributing)\n-   [License](#license)\n\n## [Live demo is available!](https://alekseymakhankov.github.io/packages/?package=hyper-tree)\n\n### Check also [react-hyper-modal](https://www.npmjs.com/package/react-hyper-modal) library\n\n## \u003ca id=\"installation\"\u003e\u003c/a\u003eInstallation\n\n###### You can use [![npm](https://api.iconify.design/logos:npm.svg?height=14)](https://www.npmjs.com/get-npm) or [![yarn](https://api.iconify.design/logos:yarn.svg?height=14)](https://yarnpkg.com/lang/en/docs/install) package managers\n\n```console\n$ npm i --save react-hyper-tree\n```\n\n**or**\n\n```console\n$ yarn add react-hyper-tree\n```\n\n## \u003ca id=\"usage\"\u003e\u003c/a\u003eUsage\n\n### Simple Usage\n\n```javascript\nimport React from 'react'\nimport Tree, { useTreeState } from 'react-hyper-tree'\n\nconst data = {\n  id: 1,\n  name: 'Parent 1',\n  children: [\n    {\n      id: 2,\n      name: 'Child 1',\n      children: [\n        {\n          id: 5,\n          name: 'Child 1__1',\n        },\n        {\n          id: 6,\n          name: 'Child 1__2',\n        },\n        {\n          id: 7,\n          name: 'Child 1__3',\n        },\n      ],\n    },\n  ],\n}\n\n...\n\nconst MyTreeComponent = () =\u003e {\n  const { required, handlers } = useTreeState({\n    data,\n    id: 'your_tree_id',\n  })\n\n  return (\n    \u003cTree\n      {...required}\n      {...handlers}\n    /\u003e\n  )\n}\n```\n\n## \u003ca id=\"properties\"\u003e\u003c/a\u003eProperties\n\n| Props                   | Description                                                                            |\n| ----------------------- | -------------------------------------------------------------------------------------- |\n| classes?                | object with elements class names                                                       |\n| data                    | nodes data, provided by _required_ prop                                                |\n| depthGap?               | children indentation related to parent                                                 |\n| disableHorizontalLines? | disable horizontal lines                                                               |\n| disableLines?           | disable all lines                                                                      |\n| disableVerticalLines?   | disable vertical lines                                                                 |\n| disableTransitions?     | disable transitions (improves performance)                                             |\n| displayedName?          | format node content, if you use default node renderer                                  |\n| draggable?:             | enable draggable mode                                                                  |\n| gapMode?                | indentation mode                                                                       |\n| horizontalLineStyles?   | horizontal line styles, [SVG](https://www.w3schools.com/html/html5_svg.asp) properties |\n| renderDragZone?         | function to render your custom drag zone                                               |\n| renderNode?             | function to render your custom node                                                    |\n| setOpen?                | open node children, provided by _handlers_ prop                                        |\n| setSelected?            | select node, provided by _handlers_ prop                                               |\n| staticNodeHeight?       | set static height of node, otherwise dynamic height will be used                       |\n| verticalLineOffset?     | vertical line offset related to parent                                                 |\n| verticalLineStyles?     | vertical line styles, [SVG](https://www.w3schools.com/html/html5_svg.asp) properties   |\n| verticalLineTopOffset?  | vertical line top offset                                                               |\n\n## \u003ca id=\"use-tree-state\"\u003e\u003c/a\u003euseTreeState API\n\nuseTreeState React hook includes the state management functionality. It prepares and transforms the data to use all functionality of the Node API.\n\n### useTreeState input\n\n| Property           | Description                                   |\n| ------------------ | --------------------------------------------- |\n| childrenKey?       | set the children key, e.g. 'children'         |\n| data               | tree-like data                                |\n| defaultOpened?     | if true, all parent will be opened            |\n| filter?            | function to filter tree nodes                 |\n| id                 | tree id, required                             |\n| idKey?             | set the data id key, e.g. 'id'                |\n| multipleSelect?    | if true, a several nodes can be selected      |\n| sort?              | function to sort tree nodes                   |\n| refreshAsyncNodes? | load async children every time when open node |\n\n### useTreeState output\n\n| Property | Description                                                                                                |\n| -------- | ---------------------------------------------------------------------------------------------------------- |\n| handlers | handlers to manipulate node state. _setOpen_, _setLoading_, _setSelected_, _setChildren_, _setRawChildren_ |\n| instance | tree view instance including all tree methods                                                              |\n| required | includes enhanced tree structure                                                                           |\n\nActually TreeView component is a renderer. It hasn't any functionality to manipulate of tree state.\n\n## \u003ca id=\"node-api\"\u003e\u003c/a\u003eNode API\n\n| Method          | Description                                | Typings                                                                       |\n| --------------- | ------------------------------------------ | ----------------------------------------------------------------------------- |\n| getChildren     | returns node children or empty array       | () =\u003e TreeNode[]                                                              |\n| getData         | returns raw node data                      | () =\u003e any                                                                     |\n| getFirstChild   | returns the first child                    | () =\u003e TreeNode `                                                              | ` null |\n| getLastChild    | returns the last child                     | () =\u003e TreeNode `                                                              | ` null |\n| getPath         | get node path                              | (array?: boolean) =\u003e string                                                   | string[] |\n| hasChildren     | returns true if node has atleast one child | () =\u003e boolean                                                                 |\n| isLoading       | returns true if node is loading            | () =\u003e boolean                                                                 |\n| isOpened        | returns true if node is opened             | () =\u003e boolean                                                                 |\n| isSelected      | returns true if node is selected           | () =\u003e boolean                                                                 |\n| setChildren     | a simple equivalent of setNodeChildren     | (children: TreeNode[]) =\u003e void                                                |\n| setData         | sets node data                             | (data?: any) =\u003e void                                                          |\n| setLoading      | set node loading                           | (loading?: boolean) =\u003e void                                                   |\n| setNodeChildren | insert node children                       | (children: TreeNode[], type?: InsertChildType, reset?: boolean) =\u003e TreeNode[] |\n| setOpened       | set node opened                            | (opened?: boolean) =\u003e void                                                    |\n| setParent       | set node parent                            | (parent?: TreeNode) =\u003e void                                                   |\n| setSelected     | set node selected                          | (selected?: boolean) =\u003e void                                                  |\n| getPath         | get node path                              | (array?: boolean) =\u003e string \\| string[]                                       |\n| getReactKey     | returns calculated property for react key  | () =\u003e string                                                                  |\n\n## \u003ca id=\"global-state-manager\"\u003e\u003c/a\u003eGlobal state manager\n\nThe main goal to implement the tree view library was a simple usage and global tree manager.\n\nActually, global state manager (GSM) is represented as _treeHandlers_ object. It has all instances of trees in the project.\n\nEvery time you use useTreeState hook. It will create a new TreeView instance and add the instance to _treeHandlers_ object.\n\n### The GSM structure\n\nThe GSM object has the one property _trees_.\n\n```typescript\ntype Handler = (...args: any[]) =\u003e any\n\ninterface IHandlers {\n    [key: string]: Handler\n}\n\ninterface ITreeItem {\n    instance: TreeView\n    handlers: IHandlers\n}\n\ninterface ITrees {\n    [key: string]: ITreeItem\n}\n\ntrees: ITrees\n```\n\nWhen you use useTreeState with the tree id, it will add tree instance to GSM. To access to tree instance you should do the next:\n\n```javascript\nimport { treeHandlers } from 'react-hyper-tree'\n\ntreeHandlers.trees[your - tree - id].instance\n```\n\nYou can use the full tree instance functionality from the GSM.\nAlso the GSM has the _handlers_ property for every tree instance.\n\nEvery tree has a default set of methods to manipulate the data\n\n| Method            | Descriptipn                                                     | Typings                                                                                                       |\n| ----------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| rerender          | rerender the tree component                                     | (callback? () =\u003e void) =\u003e void                                                                                |\n| setLoading        | set loading property                                            | (node: TreeNode \\| string \\| number, loading?: boolean) =\u003e void                                               |\n| setOpen           | set opened property                                             | (node: TreeNode \\| string \\| number, toggle?: boolean) =\u003e void                                                |\n| setOpenByPath     | set opened by path                                              | (path: string) =\u003e void                                                                                        |\n| setRawChildren    | set node children, use it if you have a raw children data       | (parent: TreeNode \\| string \\| number, children: IData[], type?: InsertChildType, reset?: boolean) =\u003e void    |\n| setChildren       | set node children, use it if you have an enhanced children data | (parent: TreeNode \\| string \\| number, children: TreeNode[], type?: InsertChildType, reset?: boolean) =\u003e void |\n| setSelected       | set selected property                                           | (node: TreeNode \\| string \\| number, selected?: boolean) =\u003e void                                              |\n| setSelectedByPath | set selected by path                                            | (path: string, all?: boolean, toggle?: boolean) =\u003e void                                                       |\n| setSiblings       | set node siblings                                               | (node: TreeNode \\| string \\| number, siblings: TreeNode[], type: InsertSiblingType) =\u003e void                   |\n| getNodeData       | returns node data                                               | (node: TreeNode \\| string \\| number, siblings: TreeNode[]) =\u003e void                                            |\n| getNode           | returns node                                                    | (node: TreeNode \\| string \\| number, siblings: TreeNode[]) =\u003e void                                            |\n| selectAll         | select all nodes (if multipleSelect is true)                    | () =\u003e void                                                                                                    |\n| unselectAll       | unselect all nodes                                              | () =\u003e void                                                                                                    |\n\nTo call any method you should do the next:\n\n```javascript\nimport { treeHandlers } from 'react-hyper-tree'\n\ntreeHandlers.trees[your-tree-id].handlers.setOpen(...)\n```\n\n### treeHandlers API\n\n| Method            | Description                   | Typings                                                                                |\n| ----------------- | ----------------------------- | -------------------------------------------------------------------------------------- |\n| getIds            | get trees ids                 | () =\u003e string[]                                                                         |\n| remove            | remove tree from the GSM      | (id: string): TreeHandlers                                                             |\n| removeHandler     | remove handler from the tree  | removeHandler(treeId: string, handlerName: string): TreeHandlers                       |\n| safeUpdate        | add or update tree in the GSM | safeUpdate(id: string, tree: TreeView) =\u003e TreeHandlers                                 |\n| safeUpdateHandler | add or update tree handler    | safeUpdateHandler(treeId: string, handlerName: string, handler: Handler): TreeHandlers |\n\nYou can also use _treeHandlers_ like call chain\n\n```javascript\ntreeHandlers\n    .safeUpdateHandler(id, 'setLoading', setLoading)\n    .safeUpdateHandler(id, 'setSelected', setSelected)\n    .safeUpdateHandler(id, 'setRawChildren', setRawChildren)\n    .safeUpdateHandler(id, 'setChildren', setChildren)\n```\n\n## \u003ca id=\"async-children\"\u003e\u003c/a\u003eAsync children\n\nYou also can use loadable children. To enable the feature you should provide _getChildren_ function to node data\n\n```javascript\nconst getChildren = ({ node }) =\u003e {\n    return getChildrenByParentId(node.id)\n}\n\nconst data = {\n    id: 1,\n    name: 'Parent 1',\n    getChildren\n}\n```\n\n_getChildren_ function can return Promise and resolve the children data in format like this:\n\n```javascript\nconst getChildren = () =\u003e\n    new Promise(resolve =\u003e\n        setTimeout(\n            () =\u003e\n                resolve([\n                    {\n                        id: 2,\n                        name: 'Child'\n                    }\n                ]),\n            1000\n        )\n    )\n```\n\nYou can also fire any events like redux-actions in the getChildren function. In this case you can set the children by the _GSM_\n\n## \u003ca id=\"default-props\"\u003e\u003c/a\u003eDefault properties\n\n```typescript\nexport const defaultProps = {\n    childrenKey: 'children',\n    classes: {} as ClassesType,\n    depthGap: 20,\n    displayedName: (node: TreeNode) =\u003e node.data.name,\n    filter: () =\u003e true,\n    gapMode: 'margin' as const,\n    horizontalLineStyles: { stroke: 'black', strokeWidth: 1, strokeDasharray: '1 1' },\n    idKey: 'id',\n    opened: [],\n    verticalLineOffset: 5,\n    verticalLineStyles: { stroke: 'black', strokeWidth: 1, strokeDasharray: '1 1' },\n    verticalLineTopOffset: 0\n}\n```\n\n## \u003ca id=\"road-map\"\u003e\u003c/a\u003e Road map\n\n-   Coverage by tests\n-   Inner improvements and extending functionality\n-   Documentation improvements\n\n## \u003ca id=\"contributing\"\u003e\u003c/a\u003eContributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n## \u003ca id=\"license\"\u003e\u003c/a\u003eLicense\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseymakhankov%2Fhyper-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falekseymakhankov%2Fhyper-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falekseymakhankov%2Fhyper-tree/lists"}