https://github.com/privatenumber/ink-task-list
Task runner components for Ink
https://github.com/privatenumber/ink-task-list
components ink runner task
Last synced: 9 months ago
JSON representation
Task runner components for Ink
- Host: GitHub
- URL: https://github.com/privatenumber/ink-task-list
- Owner: privatenumber
- License: mit
- Created: 2021-05-02T23:12:05.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2022-05-01T01:32:55.000Z (over 3 years ago)
- Last Synced: 2024-05-04T00:17:53.462Z (over 1 year ago)
- Topics: components, ink, runner, task
- Language: TypeScript
- Homepage:
- Size: 371 KB
- Stars: 28
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ink-task-list 
Task list components for [Ink](https://github.com/vadimdemedes/ink)
Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) 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 */}
{/* Loading state */}
{/* Success state */}
{/* Warning state */}
{/* Error state */}
{/* Item with children */}
,
);
```
## 🎛 API
### TaskList
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
### Task
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](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 `` components
## 🙏 Credits
The component UI was inspired [listr](https://github.com/SamVerschueren/listr) and [listr2](https://github.com/cenk1cenk2/listr2) ❤️