Ink Spinner

Ink Spinner is a React component that provides animated loading indicators for Ink CLI applications. It uses the extensive collection of spinners from cli-spinners, offering various animation styles like dots, lines, stars, and more to create polished command-line interfaces with visual feedback during long-running operations.

Package Information

• Package Name: ink-spinner
• Package Type: npm
• Language: TypeScript
• Installation: npm install ink-spinner

Core Imports

import Spinner from "ink-spinner";
import type { SpinnerName } from "cli-spinners";

For CommonJS:

const Spinner = require("ink-spinner");

Basic 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>
);

Capabilities

Spinner Component

A React functional component that renders animated spinner frames with configurable animation types.

/**
 * Spinner component that displays animated loading indicators
 * @param props - Component props containing spinner configuration
 * @returns React component displaying the animated spinner
 */
function Spinner({ type = 'dots' }: Props): React.JSX.Element;

interface Props {
  /**
   * Type of spinner animation to display.
   * See cli-spinners for available options (dots, line, star, etc.)
   * @default 'dots'
   */
  type?: SpinnerName;
}

Usage Examples:

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

// Default dots spinner
<Spinner />

// Line spinner
<Spinner type="line" />

// Star spinner  
<Spinner type="star" />

// Circle spinner
<Spinner type="circle" />

// Pipe spinner
<Spinner type="pipe" />

Types

/**
 * Type representing all available spinner names from cli-spinners library
 * Imported from cli-spinners package
 * Includes options like: 'dots', 'line', 'star', 'circle', 'pipe', 'flip', etc.
 */
type SpinnerName = import('cli-spinners').SpinnerName;

interface Props {
  /**
   * Type of spinner animation to display
   * @default 'dots'
   */
  type?: SpinnerName;
}

Dependencies

• cli-spinners: ^2.7.0 - Provides spinner frame data and timing intervals
• ink: >=4.0.0 (peer dependency) - UI framework for CLI applications
• react: >=18.0.0 (peer dependency) - React library for component rendering

Animation Behavior

The Spinner component automatically:

• Cycles through animation frames at intervals defined by the selected spinner type
• Uses React hooks (useState, useEffect) for state management and timer control
• Starts animation on mount and cleans up timers on unmount
• Resets to the first frame when reaching the end of the animation sequence
• Updates animation timing when the spinner type changes

Available Spinner Types

The component supports all spinner types from the cli-spinners library, including but not limited to:

• dots (default): Simple dot animation
• line: Horizontal line animation
• star: Rotating star animation
• circle: Circle segments animation
• pipe: Pipe character animation
• flip: Flipping animation
• hamburger: Hamburger icon animation
• growVertical: Growing vertical bars
• balloon: Balloon animation
• noise: Random noise pattern
• bounce: Bouncing animation
• boxBounce: Box bouncing animation

For the complete list of available spinners, refer to the cli-spinners repository.