Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kpulkit29/svelte-tree-viewer
Svelte tree viewer component library
https://github.com/kpulkit29/svelte-tree-viewer
Last synced: 3 months ago
JSON representation
Svelte tree viewer component library
- Host: GitHub
- URL: https://github.com/kpulkit29/svelte-tree-viewer
- Owner: kpulkit29
- License: mit
- Created: 2021-10-08T18:33:39.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-09T09:22:20.000Z (about 3 years ago)
- Last Synced: 2024-04-09T22:38:59.039Z (7 months ago)
- Language: JavaScript
- Size: 346 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-tree-viewer - A lightweight component to render tree views. (UI Components / Miscellaneous)
README
# svelte-tree-viewer
[![Build Status](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer.svg?branch=main)](https://app.travis-ci.com/kpulkit29/svelte-tree-viewer)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Bundle Size](https://img.badgesize.io/kpulkit29/svelte-tree-viewer/main/dist/index.mjs.svg?&label=size)](https://github.com/ngryman/badge-size)Easy and compact svelte component library to generate tree view.
[See Demo](https://codesandbox.io/s/svelte-tree-demo-f2ti4?file=/src/App.svelte)
https://user-images.githubusercontent.com/20151526/136652408-ad3a4a1b-4c89-43f0-9a9d-95e88f73fff3.mov
## Installation
```
npm i svelte-tree-viewer
```## Usage
## Creating a Tree structure that svelte-tree-viewer can interpret```
type Node = {
desc: string;
key?: string;
child?: Array;
}
``````
const Tree: Array = [{
desc: 'parent',
child: [{
key: 'child',
desc: 'child'
}]
}, {
desc: 'parent 2 it is',
child: [{
desc: 'child 2 it is',
child: [{
desc: 'child 2-1 it is',
key: 'child-2-1'
}]
}]
}]
```
Should be an array of objects where each object denotes a tree node and can have the following properties
- key -> a unique key name that would be forwarded as the onSelectCallback parameter. Not required on a non-leaf node.
- desc -> text to be shown on UI
- child -> denotes children of the current node. Don't pass it on if a node does have any children.## import it in your svelte component
```
import { TreeViewer } from "svelte-tree-viewer";
```
then use it in you component
```
```This component will expect the following props
- *tree* -> Tree
- *onSelectCallback(optional)*: (key) => {....your implementation} -> a callback function that will be called when any leaf node is clicked
- *secondaryIcon(optional)*: Fa icon or image src
- *faIcon*: boolean ->
- true: if the secondary icon is a font awesome icon
- false: if it is an image url**Note: onSelectCallback will be called only when a click event is registered on the leaf nodes**
## Using secondary icons
svelte-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-viewer1. Using font awesome
```
import { faBookDead } from '@fortawesome/free-solid-svg-icons';// Note: faIcon is true here since faBookDead is a font awesome icon
```2. Using custom image url
```
// Note: faIcon is false here
```