ink-task-runner

Task runner components for Ink

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

🚀 Install

npm i ink-task-runner

🚦 Quick usage

import React from 'react';
import { render } from 'ink';
import { TaskList, Task } from 'ink-task-runner';

render(
    <TaskList>
        <!-- Pending state -->
        <Task
            label="Pending"
            state="pending"
        />

        <!-- Loading state -->
        <Task
            label="Loading"
            state="loading"
        />

        <!-- 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"
            />
        </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.

children

Type: ReactNode | ReactNode[]

Pass in one or more <Task> components

label

Type: string

Required

state

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

Default: pending

spinnerType

Type: string

Default: dots

isExpanded

Type: boolean

Default: false

🙏 Credits

The component UI was insipired listr and listr2 ❤️