https://github.com/grantila/react-vscode
React for VSCode
https://github.com/grantila/react-vscode
Last synced: 3 months ago
JSON representation
React for VSCode
- Host: GitHub
- URL: https://github.com/grantila/react-vscode
- Owner: grantila
- License: mit
- Created: 2021-08-20T08:04:41.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-23T11:54:37.000Z (about 4 years ago)
- Last Synced: 2025-06-25T23:45:01.483Z (4 months ago)
- Language: TypeScript
- Size: 29.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm version][npm-image]][npm-url]
[![downloads][downloads-image]][npm-url]
[![build status][build-image]][build-url]
[![Language grade: JavaScript][lgtm-image]][lgtm-url]
[![Node.JS version][node-version]][node-url]
This package allows you to write [TreeViews](https://code.visualstudio.com/api/extension-guides/tree-view) in React.
# API
Use the exported component `TreeItem` (with props `TreeItemProps`) to build a react tree view tree:
```ts
import { TreeItem } from 'react-vscode'
export function MyTree( ) {
return (
);
}
function SomeThings( ) {
return [ "a", "b", "c" ].map( label =>
console.log( `Clicked ${label}` ); }
/>
);
}
```
The `TreeItemProps` are defined as:
```ts
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 );`
```ts
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`](https://code.visualstudio.com/api/references/vscode-api#window.createTreeView)
The returned object is on the form:
```ts
interface TreeResult
{
treeView: vscode.TreeView;
treeDataProvider: vscode.TreeDataProvider;
disposable: vscode.Disposable;
}
```
[npm-image]: https://img.shields.io/npm/v/react-vscode.svg
[npm-url]: https://npmjs.org/package/react-vscode
[downloads-image]: https://img.shields.io/npm/dm/react-vscode.svg
[build-image]: https://img.shields.io/github/workflow/status/grantila/react-vscode/Master.svg
[build-url]: https://github.com/grantila/react-vscode/actions?query=workflow%3AMaster
[coverage-image]: https://coveralls.io/repos/github/grantila/react-vscode/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/grantila/react-vscode?branch=master
[lgtm-image]: https://img.shields.io/lgtm/grade/javascript/g/grantila/react-vscode.svg?logo=lgtm&logoWidth=18
[lgtm-url]: https://lgtm.com/projects/g/grantila/react-vscode/context:javascript
[node-version]: https://img.shields.io/node/v/react-vscode
[node-url]: https://nodejs.org/en/