1 | # 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>
|
2 |
|
3 | Task list components for [Ink](https://github.com/vadimdemedes/ink)
|
4 |
|
5 | <p align="center">
|
6 | <img width="400" src=".github/task-list.gif">
|
7 | </p>
|
8 |
|
9 | <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>
|
10 |
|
11 | ## 🚀 Install
|
12 | ```sh
|
13 | npm i ink-task-list
|
14 | ```
|
15 |
|
16 | ## 🚦 Quick usage
|
17 | ```tsx
|
18 | import React from 'react';
|
19 | import { render } from 'ink';
|
20 | import { TaskList, Task } from 'ink-task-list';
|
21 |
|
22 | render(
|
23 | <TaskList>
|
24 | {/* Pending state */}
|
25 | <Task
|
26 | label="Pending"
|
27 | state="pending"
|
28 | />
|
29 |
|
30 | {/* Loading state */}
|
31 | <Task
|
32 | label="Loading"
|
33 | state="loading"
|
34 | />
|
35 |
|
36 | {/* Success state */}
|
37 | <Task
|
38 | label="Success"
|
39 | state="success"
|
40 | />
|
41 |
|
42 | {/* Warning state */}
|
43 | <Task
|
44 | label="Warning"
|
45 | state="warning"
|
46 | />
|
47 |
|
48 | {/* Error state */}
|
49 | <Task
|
50 | label="Error"
|
51 | state="error"
|
52 | />
|
53 |
|
54 | {/* Item with children */}
|
55 | <Task
|
56 | label="Item with children"
|
57 | isExpanded
|
58 | >
|
59 | <Task
|
60 | label="Loading"
|
61 | state="loading"
|
62 | />
|
63 | </Task>
|
64 | </TaskList>,
|
65 | );
|
66 | ```
|
67 |
|
68 | ## 🎛 API
|
69 |
|
70 | ### TaskList
|
71 |
|
72 | Optional wrapper to contain a list of `Tasks`.
|
73 |
|
74 | Basically just a `<Box flexDirection="column">`; only for styling and semantic purposes.
|
75 |
|
76 | #### children
|
77 | Type: `ReactNode | ReactNode[]`
|
78 |
|
79 | Required
|
80 |
|
81 | Pass in list of Tasks
|
82 |
|
83 | ### Task
|
84 |
|
85 | Represents each task.
|
86 |
|
87 | #### label
|
88 | Type: `string`
|
89 |
|
90 | Required
|
91 | #### state
|
92 | Type: `'pending'|'loading'|'success'|'warning'|'error'`
|
93 |
|
94 | Default: `pending`
|
95 |
|
96 | <img src=".github/states.gif" width="216">
|
97 |
|
98 | #### status
|
99 | Type: `string`
|
100 |
|
101 | Status of the task to show on the right of the `label`
|
102 |
|
103 | <img src=".github/states-w-status.gif" width="216">
|
104 |
|
105 | #### output
|
106 | Type: `string`
|
107 |
|
108 | Single-line output prefixed by `→` to show below the `label`
|
109 |
|
110 | <img src=".github/states-w-output.gif" width="216">
|
111 |
|
112 | #### spinnerType
|
113 | Type: `string`
|
114 |
|
115 | Default: `dots`
|
116 |
|
117 | Spinner type used for loading state. See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available types.
|
118 | #### isExpanded
|
119 | Type: `boolean`
|
120 |
|
121 | Default: `false`
|
122 |
|
123 | Whether or not to show the children.
|
124 |
|
125 | #### children
|
126 | Type: `ReactNode | ReactNode[]`
|
127 |
|
128 | Pass in one or more `<Task>` components
|
129 |
|
130 | <img src=".github/nested.gif" width="216">
|
131 |
|
132 | ## 🙏 Credits
|
133 | The component UI was insipired [listr](https://github.com/SamVerschueren/listr) and [listr2](https://github.com/cenk1cenk2/listr2) ❤️
|
134 |
|
135 | Big thanks to [Sindre Sorhus](https://github.com/sindresorhus) for making this package so easy to make.
|