react-cli-spinners

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

---


- react-cli-spinners
- Why
- This Solution
- Installation
- Usage
- Inspiration
- License

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:

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

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

Installation

This package is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

yarn add react-cli-spinners or npm install -s react-cli-spinners

Usage

Please checkout [examples]()

Inspiration

- cli-spinners

License

AGPL-3.0