# ink-task-list

> Render a Task list in Ink

Latest version **2.0.0** (published 2022-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-task-list
pnpm add ink-task-list
yarn add ink-task-list
bun add ink-task-list
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-05-01 |
| First published | 2021-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Author | Hiroki Osame |
| Maintainers | hirokiosame |
| Keywords | ink, components, task list, task |

## Links

- npm: https://www.npmjs.com/package/ink-task-list
- Repository: https://github.com/privatenumber/ink-task-list
- Homepage: https://github.com/privatenumber/ink-task-list#readme
- Issues: https://github.com/privatenumber/ink-task-list/issues
- Funding: https://github.com/privatenumber/ink-task-list?sponsor=1
- npm.io page: https://npm.io/package/ink-task-list

## Recent versions

- 2.0.0 (latest) — 2022-05-01
- 1.1.1 — 2022-04-27
- 1.1.0 — 2021-06-03
- 1.0.1 — 2021-05-12
- 1.0.0 — 2021-05-06

## README

# ink-task-list <a href="https://npm.im/ink-task-list"><img src="https://badgen.net/npm/v/ink-task-list"></a> <a href="https://npm.im/ink-task-list"><img src="https://badgen.net/npm/dm/ink-task-list"></a> <a href="https://packagephobia.now.sh/result?p=ink-task-list"><img src="https://packagephobia.now.sh/badge?p=ink-task-list"></a>

Task list components for [Ink](https://github.com/vadimdemedes/ink)

<p align="center">
  <img width="400" src=".github/task-list.gif">
</p>

<sub>Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>

## 🚀 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(
    <TaskList>
        {/* Pending state */}
        <Task
            label="Pending"
            state="pending"
        />

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

        {/* Success state */}
        <Task
            label="Success"
            state="success"
        />

        {/* Warning state */}
        <Task
            label="Warning"
            state="warning"
        />

        {/* Error state */}
        <Task
            label="Error"
            state="error"
        />

        {/* Item with children */}
        <Task
            label="Item with children"
            isExpanded
        >
            <Task
                label="Loading"
                state="loading"
                spinner={spinners.dots}
            />
        </Task>
    </TaskList>,
);
```

## 🎛 API

### TaskList

Optional wrapper to contain a list of `Tasks`.

Basically just a `<Box flexDirection="column">`; only for styling and semantic purposes.

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

Required

Pass in list of Tasks

### Task

Represents each task.

#### label
Type: `string`

Required

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

Default: `pending`

<img src=".github/states.gif" width="216">

#### status
Type: `string`

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

<img src=".github/states-w-status.gif" width="216">

#### output
Type: `string`

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

<img src=".github/states-w-output.gif" width="216">

#### 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](https://github.com/sindresorhus/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 `<Task>` components

<img src=".github/nested.gif" width="216">

## 🙏 Credits
The component UI was inspired [listr](https://github.com/SamVerschueren/listr) and [listr2](https://github.com/cenk1cenk2/listr2) ❤️

---
_Source: https://npm.io/package/ink-task-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._