ink-tree-select

ink-tree-select

Tree select component built for ink

Please consider following this project's author, Sina Bayandorian, and consider starring the project to show your :heart: and support.

Table of Contents

• Installation
• Usage
• Components
  • TreeSelect
  • VirtualTreeSelect
  • MultiTreeSelect
  • MultiVirtualTreeSelect

Installation

npm i ink-tree-select

Usage

// * 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<string>('');
  const selectHandler = (path: string) => setSelectedPath(path);

  return (
    <>
      <TreeSelect root='./' onSelect={selectHandler} />
      {selectedPath.length > 0 && <Text>{selectedPath}</Text>}
    </>
  );
};

render(<App />);

Components

<TreeSelect />

	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

type TreeSelectOptions = Partial<{
  // * directories to ignore - read https://www.npmjs.com/package/fast-glob#ignore
  ignore: string[];
  rootAlias: string; // defaults to '.' - tree's root
  previewColor: Color; // path preview text color
  indicatorColor: Color; // ● color
}>;

<VirtualTreeSelect />

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

type Tree = { name: string; fullPath: string; branches: Tree[]; dir?: boolean };

VirtualTreeSelectOptions

type VirtualTreeSelectOptions = Partial<{
  previewColor: Color; // path preview text color
  indicatorColor: Color; // ● color
}>;

<MultiTreeSelect />

	Type	Default	Description
root	string		Root directory to scan
onChange	(activePath: string, selectedPaths: string[]) => void;		Triggers on every selected path change
onSelect	(selectedPaths: string[]) => void;		Triggers once user hits Enter
options	TreeSelectOptions	{ }

TreeSelectOptions

type TreeSelectOptions = Partial<{
  // * directories to ignore - read https://www.npmjs.com/package/fast-glob#ignore
  ignore: string[];
  rootAlias: string; // defaults to '.' - tree's root
  previewColor: Color; // path preview text color
  indicatorColor: Color; // ● color
}>;

<MultiVirtualTreeSelect />

Accepts a custom tree instead of a directory to scan

	Type	Default	Description
tree	Tree		Custom directory tree
onChange	(activePath: string, selectedPaths: string[]) => void;		Triggers on every selected path change
onSelect	(selectedPaths: string[]) => void;		Triggers once user hits Enter
options	VirtualTreeSelectOptions	{ }

Tree

type Tree = { name: string; fullPath: string; branches: Tree[]; dir?: boolean };

VirtualTreeSelectOptions

type MultiVirtualTreeSelectOptions = Partial<{
  previewColor: Color; // path preview text color
  indicatorColor: Color; // (*) color
}>;