Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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-viewer

1. 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

```