ComponentsFilePicker
FilePicker
stableDirectory navigator with extension filtering and keyboard navigation.
Browser preview is a simulation. The copied component runs in actual terminal apps.
file-picker.tsx
> ./bin/file
Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies
>drwxr-xr-x288 Bprojects
file-picker.tsx
Installation
npx orizen-tui@latest add file-picker
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/file-picker.tsx
Usage
file-picker.imports.tsx
file-picker.example.tsx
Examples
Usage
file-picker.example1.tsx
> ./bin/file
Pick a file:
>drwxr-xr-x128 Bbin
>drwxr-xr-x 64 Bbooks
>drwxr-xr-x 96 Bmovies
>drwxr-xr-x288 Bprojects
file-picker.example1.tsx
API Reference
FilePicker
PropTypeDefaultDescription
initialDirstring"."Directory to open on mount
initialDir"."
stringDirectory to open on mount
extensionsstring[]undefinedFile extension filter e.g. [".ts", ".tsx"]
extensionsundefined
string[]File extension filter e.g. [".ts", ".tsx"]
onSelect(entry: FileEntry) => voidundefinedCalled when a file is selected
onSelectundefined
(entry: FileEntry) => voidCalled when a file is selected
onCancel() => voidundefinedCalled when Escape is pressed
onCancelundefined
() => voidCalled when Escape is pressed
heightnumber10Number of visible directory entries
height10
numberNumber of visible directory entries
widthnumberundefinedWidth of the file picker in columns
widthundefined
numberWidth of the file picker in columns
readDir(dir: string) => Promise<FileEntry[]>undefinedCustom directory reader (useful for testing)
readDirundefined
(dir: string) => Promise<FileEntry[]>Custom directory reader (useful for testing)
joinPath(base: string, name: string) => stringundefinedCustom path join function
joinPathundefined
(base: string, name: string) => stringCustom path join function
focusbooleantrueWhether to accept keyboard input
focustrue
booleanWhether to accept keyboard input
colorstringundefinedText color
colorundefined
stringText color