ink-spinner

What is ink-spinner?

The ink-spinner npm package provides a collection of customizable spinner components for use with Ink, a React-like library for building command-line interfaces. It allows developers to add loading spinners to their CLI applications, enhancing the user experience by indicating ongoing processes.

What are ink-spinner's main functionalities?

Basic Spinner

This feature demonstrates how to use a basic spinner in an Ink application. The spinner type is set to 'dots', and it is displayed alongside a 'Loading...' message.

const { render } = require('ink');
const Spinner = require('ink-spinner').default;
const React = require('react');

const App = () => (
  <div>
    <Spinner type="dots" /> Loading...
  </div>
);

render(<App />);

Custom Spinner Type

This feature shows how to use a custom spinner type. In this example, the spinner type is set to 'line', and it is displayed with a 'Processing...' message.

const { render } = require('ink');
const Spinner = require('ink-spinner').default;
const React = require('react');

const App = () => (
  <div>
    <Spinner type="line" /> Processing...
  </div>
);

render(<App />);

Spinner with Custom Color

This feature demonstrates how to customize the color of the spinner. The spinner type is 'dots', and it is wrapped in a Color component to display it in green.

const { render } = require('ink');
const Spinner = require('ink-spinner').default;
const React = require('react');
const { Color } = require('ink');

const App = () => (
  <div>
    <Color green>
      <Spinner type="dots" /> Loading...
    </Color>
  </div>
);

render(<App />);

Other packages similar to ink-spinner

ora

Ora is a terminal spinner library that provides a variety of spinner styles and options for customization. Unlike ink-spinner, which is designed specifically for use with Ink, Ora can be used in any Node.js CLI application. It offers more configuration options and supports promises for handling asynchronous operations.

cli-spinners

Cli-spinners is a collection of various spinner animations for use in command-line interfaces. It provides a wide range of spinner styles that can be used with any CLI application. While it does not provide a React-like component structure like ink-spinner, it offers a simple way to integrate spinners into any Node.js project.

listr

Listr is a library for creating elegant CLI task lists with spinners. It allows developers to define tasks with spinners that indicate progress. Unlike ink-spinner, which focuses solely on spinners, Listr provides a more comprehensive solution for managing and displaying task progress in CLI applications.

README

ink-spinner

Spinner component for Ink. Uses cli-spinners for the collection of spinners.

Looking for a version compatible with Ink 2.x? Check out this release.

Install

$ npm install ink-spinner

Usage

import React from 'react';
import { render, Text } from 'ink';
import Spinner from 'ink-spinner';

render(
	<Text>
		<Text color="green">
			<Spinner type="dots" />
		</Text>
		{' Loading'}
	</Text>
);

Props

type

Type: string
Defaults: dots

Type of a spinner. See cli-spinners for available spinners.