React-cli-spinners NPM

react-cli-spinners

Assorted text-based activity indicators for usage in React components, based on cli-spinners.

react-cli-spinners

Why

I love the look and simplicity of sindresorhus' collection of text spinners/activity indicators for CLI applications and wanted to experiment with using them in React.

This Solution

This package provides a single React component, Spinner and (for now) accepts, a single prop: type, which configures the component to use a specific spinner.

Given a spinner type, react-cli-spinners looks for the spinner's details, stored as a JSON file, and provides the Spinner component with the following data:

// example demonstrating the data consumed by `Spinner` React component

"arrow3": {
  "interval": 120,
  "frames": ["▹▹▹▹▹", "▸▹▹▹▹", "▹▸▹▹▹", "▹▹▸▹▹", "▹▹▹▸▹", "▹▹▹▹▸"]
}