https://github.com/sina-byn/ink-tree-select
Directory tree select component for ink
https://github.com/sina-byn/ink-tree-select
cli directory-traversal directory-tree directory-tree-generator ink javascript nodejs react terminal typescript
Last synced: 6 months ago
JSON representation
Directory tree select component for ink
- Host: GitHub
- URL: https://github.com/sina-byn/ink-tree-select
- Owner: sina-byn
- License: mit
- Created: 2025-02-04T11:09:34.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-06T09:24:19.000Z (8 months ago)
- Last Synced: 2025-03-12T19:04:16.151Z (7 months ago)
- Topics: cli, directory-traversal, directory-tree, directory-tree-generator, ink, javascript, nodejs, react, terminal, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ink-tree-select
- Size: 326 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ink-tree-select [](https://www.npmjs.com/package/ink-tree-select) [](https://npmjs.org/package/ink-tree-select) [](https://npmjs.org/package/ink-tree-select)
Tree select component built for [ink](https://www.npmjs.com/package/ink)
Please consider following this project's author, [Sina Bayandorian](https://github.com/sina-byn), and consider starring the project to show your :heart: and support.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [TreeSelect](#treeselect-)
- [VirtualTreeSelect](#virtualtreeselect-)
## Installation
```shell
npm i ink-tree-select
```
## Usage
```js
// * index.tsx
// * visit the components section if you need further customization
import { render, Text } from 'ink';
import React, { useState } from 'react';
import { TreeSelect } from 'ink-tree-select';
const App = () => {
const [selectedPath, setSelectedPath] = useState('');
const selectHandler = (path: string) => setSelectedPath(path);
return (
<>
{selectedPath.length > 0 && {selectedPath}}
>
);
};
render();
```
## Components
### ``
| | Type | Default | Description |
|----------|---------------------------------------------|---------|----------------------------------------|
| root | string | | Root directory to scan |
| onChange | `(activePath: string) => void;` | | Triggers on every selected path change |
| onSelect | `(selectedPath: string) => void;` | | Triggers once user hits `Enter` |
| options | `TreeSelectOptions` | `{ }` | |
#### TreeSelectOptions
```ts
type TreeSelectOptions = Partial<{
// * directories to ignore - read https://www.npmjs.com/package/fast-glob#ignore
ignore: string[];
rootAlias: string; // default to '.' - tree's root
previewColor: Color; // path preview text color
indicatorColor: Color; // ● color
}>;
```
### ``
Accepts a custom tree instead of a directory to scan
| | Type | Default | Description |
|----------|---------------------------------------------|---------|----------------------------------------|
| tree | `Tree` | | Custom directory tree |
| onChange | `(activePath: string) => void;` | | Triggers on every selected path change |
| onSelect | `(selectedPath: string) => void;` | | Triggers once user hits `Enter` |
| options | `VirtualTreeSelectOptions` | `{ }` | |
#### Tree
```ts
type Tree = { name: string; fullPath: string; branches: Tree[]; dir?: boolean };
```
#### VirtualTreeSelectOptions
```ts
type VirtualTreeSelectOptions = Partial<{
previewColor: Color; // path preview text color
indicatorColor: Color; // ● color
}>;
```