{"id":13806355,"url":"https://github.com/kpulkit29/svelte-tree-viewer","last_synced_at":"2025-05-13T21:32:55.332Z","repository":{"id":48143408,"uuid":"415090858","full_name":"kpulkit29/svelte-tree-viewer","owner":"kpulkit29","description":"Svelte tree viewer component library","archived":false,"fork":false,"pushed_at":"2021-10-09T09:22:20.000Z","size":354,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-18T22:32:11.175Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/kpulkit29.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":"2021-10-08T18:33:39.000Z","updated_at":"2024-07-27T15:47:16.000Z","dependencies_parsed_at":"2022-09-04T19:32:11.325Z","dependency_job_id":null,"html_url":"https://github.com/kpulkit29/svelte-tree-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpulkit29%2Fsvelte-tree-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpulkit29%2Fsvelte-tree-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpulkit29%2Fsvelte-tree-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kpulkit29%2Fsvelte-tree-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kpulkit29","download_url":"https://codeload.github.com/kpulkit29/svelte-tree-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254031417,"owners_count":22002758,"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":[],"created_at":"2024-08-04T01:01:10.677Z","updated_at":"2025-05-13T21:32:55.017Z","avatar_url":"https://github.com/kpulkit29.png","language":"JavaScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Miscellaneous"],"readme":"# svelte-tree-viewer\n\n[![Build Status](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer.svg?branch=main)](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Bundle Size](https://img.badgesize.io/kpulkit29/svelte-tree-viewer/main/dist/index.mjs.svg?\u0026label=size)](https://github.com/ngryman/badge-size)\n\n\nEasy and compact svelte component library to generate tree view.\n\n[See Demo](https://codesandbox.io/s/svelte-tree-demo-f2ti4?file=/src/App.svelte)\n\nhttps://user-images.githubusercontent.com/20151526/136652408-ad3a4a1b-4c89-43f0-9a9d-95e88f73fff3.mov\n## Installation\n```\nnpm i svelte-tree-viewer\n```\n\n## Usage\n## Creating a Tree structure that svelte-tree-viewer can interpret\n\n```\ntype Node =  {\n    desc: string;\n    key?: string;\n    child?: Array\u003cNode\u003e;\n}\n```\n\n```\nconst Tree: Array\u003cNode\u003e = [{\n  desc: 'parent',\n  child: [{\n    key: 'child',\n    desc: 'child'\n  }]\n}, {\n  desc: 'parent 2 it is',\n  child: [{\n    desc: 'child 2 it is',\n    child: [{\n      desc: 'child 2-1 it is',\n      key: 'child-2-1'\n    }]\n  }]\n}]\n```\nShould be an array of objects where  each object denotes a tree node and can have the following properties\n - key -\u003e a unique key name that would be forwarded as the onSelectCallback parameter. Not required on a non-leaf node.\n - desc -\u003e text to be shown on UI\n - child -\u003e denotes children of the current node. Don't pass it on if a node does have any children.\n\n## import it in your svelte component\n```\nimport { TreeViewer } from \"svelte-tree-viewer\";\n```\nthen use it in you component\n```\n \u003cTreeViewer tree={tree} onSelectCallback={YOUR_CALLBACK_FUNCTION_HERE}/\u003e\n```\n\nThis component will expect the following props\n - *tree* -\u003e Tree\n - *onSelectCallback(optional)*: (key) =\u003e {....your implementation} -\u003e a callback function that will be called when any leaf node is clicked\n - *secondaryIcon(optional)*: Fa icon or image src\n - *faIcon*: boolean -\u003e\n                      - true: if the secondary icon is a font awesome icon\n                      - false: if it is an image url\n\n**Note: onSelectCallback will be called only when a click event is registered on the leaf nodes**\n\n## Using secondary icons\nsvelte-tree-viewer supports font awesome icons and uses [svelte-fa](https://cweili.github.io/svelte-fa/) to render those. if you want the secondary icon to be visible on the screen, then there are two possible ways to pass it on to svelte-tree-viewer\n\n1. Using font awesome\n```\n import { faBookDead } from '@fortawesome/free-solid-svg-icons';\n\n // Note: faIcon is true here since faBookDead is a font awesome icon\n \u003cTreeViewer tree={tree} secondaryIcon={faBookDead} onSelectCallback={YOUR_CALLBACK_FUNCTION_HERE} faIcon={true}/\u003e\n```\n\n2. Using custom image url\n```\n // Note: faIcon is false here\n \u003cTreeViewer tree={tree} secondaryIcon={'[YOUR_IMAGE_SRC]'} onSelectCallback={YOUR_CALLBACK_FUNCTION_HERE} faIcon={false}/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpulkit29%2Fsvelte-tree-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkpulkit29%2Fsvelte-tree-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpulkit29%2Fsvelte-tree-viewer/lists"}