ink-task-list

Task list components for Ink

_{Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️}

🚀 Install

``sh
npm i ink-task-list
`

🚦 Quick usage

`tsx
import React from 'react';
import { render } from 'ink';
import { TaskList, Task } from 'ink-task-list';
import spinners from 'cli-spinners';

render(

{/ Pending state /}
label="Pending"
state="pending"
/>

{/ Loading state /}
label="Loading"
state="loading"
spinner={spinners.dots}
/>

{/ Success state /}
label="Success"
state="success"
/>

{/ Warning state /}
label="Warning"
state="warning"
/>

{/ Error state /}
label="Error"
state="error"
/>

{/ Item with children /}
label="Item with children"
isExpanded
>
label="Loading"
state="loading"
spinner={spinners.dots}
/>

,
);
`

🎛 API

$3

Optional wrapper to contain a list of Tasks.

Basically just a ; only for styling and semantic purposes.

#### children
Type: ReactNode | ReactNode[]

Required

Pass in list of Tasks

$3

Represents each task.

#### label
Type: string

Required

#### state
Type: 'pending'|'loading'|'success'|'warning'|'error'

Default: pending

#### status
Type: string

Status of the task to show on the right of the label

#### output
Type: string

Single-line output prefixed by → to show below the label

#### spinner
Type:
`ts
type Spinner = {
interval: number
frames: string[]
}
`

Required if state is loading

Spinner data used for loading state. Pass in a spinner from cli-spinners for convenience.

#### isExpanded
Type: boolean

Default: false

Whether or not to show the children.

#### children
Type: ReactNode | ReactNode[]

Pass in one or more ` components

🙏 Credits

The component UI was inspired listr and listr2 ❤️