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

 

```