This package allows you to write TreeViews in React.

API

Use the exported component TreeItem (with props TreeItemProps) to build a react tree view tree:

import { TreeItem } from 'react-vscode'

export function MyTree( ) {
   return (
      <TreeItem label="first top-level" initiallyExpanded>
         <SomeThings />
      </TreeItem>
   );
}

function SomeThings( ) {
   return [ "a", "b", "c" ].map( label =>
      <TreeItem
         label={ label }
         onClick={ ( ) => console.log( `Clicked ${label}` ); }
         />
   );
}

The TreeItemProps are defined as:

interface TreeItemProps
{
	label: TreeItemLabel;
	description?: string;
	iconUri?: string | { light: string; dark: string };
	tooltip?: string | /*MarkdownString |*/ undefined;
	initiallyExpanded?: boolean;
	onClick?: ( ) => void;
	onSelected?: ( ) => void;
	onExpandState?: ( expanded: boolean ) => void;
}

type TreeItemLabel = string | {
	label: string;
	highlights?: [ number, number ][ ];
};

You can also import the component types from react-vscode/components, in which case you won't get potential module issues with vscode or perf_hooks not being resolvable.

Use in VSCode

You need to have a tree registered with an id in package.json, in e.g. contributes/views/explorer.

With a tree id, use getTree to create a tree view from a react component. The returned object contains a disposable which should be handled, e.g. context.subscriptions.push( disposable );

import { getTree } from 'react-vscode'

// MyTree as defined above

const { disposable } =
   getTree( "my-tree-id", MyTree, { showCollapseAll: true } );

The third optional options object is the same as the one to createTreeView

The returned object is on the form:

interface TreeResult
{
	treeView: vscode.TreeView;
	treeDataProvider: vscode.TreeDataProvider;
	disposable: vscode.Disposable;
}