{"id":23734189,"url":"https://github.com/tochy97/tree","last_synced_at":"2026-02-12T05:04:27.744Z","repository":{"id":269170124,"uuid":"903194131","full_name":"tochy97/tree","owner":"tochy97","description":"Package for building Tree UI component. It includes a fully customizable react component, stand-alone object builder and a custom HTML element.","archived":false,"fork":false,"pushed_at":"2025-01-09T22:58:16.000Z","size":1145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-04T09:51:59.171Z","etag":null,"topics":["jest","reactjs","tree-ui","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tochy97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-14T00:53:47.000Z","updated_at":"2025-01-09T22:58:20.000Z","dependencies_parsed_at":"2025-09-04T09:43:48.986Z","dependency_job_id":null,"html_url":"https://github.com/tochy97/tree","commit_stats":null,"previous_names":["tochy97/tree-ui","tochy97/tree"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tochy97/tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tochy97%2Ftree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tochy97%2Ftree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tochy97%2Ftree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tochy97%2Ftree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tochy97","download_url":"https://codeload.github.com/tochy97/tree/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tochy97%2Ftree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29359360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["jest","reactjs","tree-ui","typescript","webpack"],"created_at":"2024-12-31T05:37:32.343Z","updated_at":"2026-02-12T05:04:27.729Z","avatar_url":"https://github.com/tochy97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tree\nTree package for building Tree UI compoenent. It includes a fully customizable react component, stand-alone object builder and a custome HTML element. \n## Getting Started\n`npm i @egeonu/tree`\n## Usage\nA few examples of useful commands and/or tasks.\n## ReactTree\n### Props (input configuration)\n```ts\nexport type Config = {\n    data: Array\u003cany\u003e // input is an example\n    name?: string // Name of tree\n    collapsible?: boolean // Can collapse\n    tree_container_class?: string\n    tree_children_class?: string\n    tree_element_class?: string\n    tree_leaf_class?: string\n    tree_parent_class?: string\n    onclick?: any // Onclick callback\n}\n```\n```ts\nimport { ReactTree } from \"@egeonu/tree\";\n\n    const input = [\n        {\n            id: 1,\n        },\n        {\n            id: 2,\n            parents: [1]\n        },\n        {\n            id: 3,\n            parents: [2, 1]\n        },\n        {\n            id: 4,\n            parents: [2]\n        },\n        {\n            id: 5,\n            parents: [2, 3, 4]\n        }\n    ]\n\nroot.render(\n    \u003cReactTree data={input} /\u003e\n);\n```\n### Expected output\n![alt text](./src/README/example.png \"Example\")\n## TreeBuilder\n```ts\nimport { TreeBuilder } from \"@egeonu/tree\";\n\n    const input = [\n        {\n            id: 1,\n        },\n        {\n            id: 2,\n            parents: [1]\n        },\n        {\n            id: 3,\n            parents: [2, 1]\n        },\n        {\n            id: 4,\n            parents: [2]\n        },\n        {\n            id: 5,\n            parents: [2, 3, 4]\n        }\n    ]\n    // with props\n    const tree = new TreeBuilder({ data: input });\n    console.log(tree.data);\n    // without props\n    tree = new TreeBuilder();\n    tree.createTree(input);\n    console.log(tree.data);\n    // static invoke\n    tree = TreeBuilder.createTree(input);\n    console.log(tree);\n```\n### Expected output \n```js\n[\n    {\n      id: 1,\n      children: [\n        {\n          id: 2,\n          children: [\n            {\n              id: 3,\n              children: [ { id: 5, children: [], data: undefined } ],\n              data: undefined\n            },\n            {\n              id: 4,\n              children: [ { id: 5, children: [], data: undefined } ],\n              data: undefined\n            },\n            { id: 5, children: [], data: undefined }\n          ],\n          data: undefined\n        },\n        {\n          id: 3,\n          children: [ { id: 5, children: [], data: undefined } ],\n          data: undefined\n        }\n      ],\n      data: undefined\n    }\n]\n```\n## TreeNodeElement\n* You can use the TreeNodeElement to build your own tree with more control. \n* It will require some recursion, view example below. (This is from `ReactTree`)\n```js\n  function startMap (tree: Array\u003cTreeNode\u003e) {\n    let self = this;\n    const container = document.getElementById(\"tree_container\");\n    for (const object of tree) {\n      // Create contanier for the node\n      const element = document.createElement(\"div\");\n      element.setAttribute(\"id\", object.id);\n      // Create container to hold node data\n      const leaf = document.createElement(\"tree-node\") as TreeNodeElement;\n      leaf.innerHTML = object.data?.content ? object.data?.content : \"\";\n      element.appendChild(leaf);\n      if (object.children.length \u003e 0) {\n        // Map children for this node\n        self.mapTree(element, object.children, 2, leaf);\n      }\n      // Append to main container\n      container.appendChild(element);\n    }\n  }\n\n  mapTree (container: HTMLElement, tree: Array\u003cTreeNode\u003e, gap: number, parentLeaf: TreeNodeElement) {\n    let self = this;\n    // Create container for the children\n    const children = document.createElement(\"div\");\n    const child_id = container.id + \"-row\";\n    children.setAttribute(\"id\", child_id);\n    // Add children container id to the parent\n    parentLeaf.setAttribute(\"rowId\", child_id);\n    for (const object of tree) {\n      // Create contanier for the node\n      const element = document.createElement(\"div\");\n      element.setAttribute(\"id\", object.id + \"-\" + container.id);\n      // Create container to hold node data\n      const leaf = document.createElement(\"tree-node\") as TreeNodeElement;\n      element.appendChild(leaf);\n      leaf.innerHTML = object.data?.content ? object.data?.content : \"\";\n      if (object.children.length \u003e 0) {\n        // Map children for this node\n        self.mapTree(element, object.children, gap, leaf);\n      }\n      // Append to children container\n      children.appendChild(element);\n    }\n    // Append to main container\n    container.appendChild(children);\n  }\n```\n* In this example we set the attribute `rowId` with the `child_id` representing the element we expect to hold the children of the current node.\n* I choose to build `child_id` from a concatenation of all the parent ids' with the child to avoid collisions.\n* This allows for the built in event listener to handle closing and opening the element holding the children.\n## To-Do\n1. Style options: flat, tree, horizontal and vertical\n2. Draw connector lines with SVG","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftochy97%2Ftree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftochy97%2Ftree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftochy97%2Ftree/lists"}