Animated Terminals Component In React

This is the rewritten version of the react-animated-term component, which allows you to render animated terminals in your app.

How to use it:

1. Install & import the component.

# Yarn
$ yarn add @nitric/react-animated-term

# NPM
$ npm i @nitric/react-animated-term

// Import
import React from 'react';
import Terminal from '@nitric/react-animated-term';
// Stylesheet
import '@nitric/react-animated-term/css/styles.css';

2. Add the terminal component to the app and define your own commands.

const myCMD = [
  {
    text: 'ls',
    color: 'blue',
    cmd: true,
  },
  {
    text: 'index.js    package.json    node_modules',
    cmd: false,
  },
  {
    text: 'cd',
    cmd: true,
  },
];
const MyComponent = () => {
  return <Terminal lines={myCMD} interval={50} />;
};

3. With loading & framed animations.

const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
const myCMD = [
  {
    text: 'node example.js',
    cmd: true,
    delay: 80,
  },
  {
    text: 'Loaded app',
    cmd: false,
    repeat: true,
    repeatCount: 5,
    frames: spinner.map(function (spinner) {
      return {
        text: spinner + ' Loading app',
        delay: 40,
      };
    }),
  },
  {
    text: 'cd',
    cmd: true,
  },
];
const MyComponent = () => {
  return <Terminal lines={termLines} interval={50} />;
};

4. Available component props.

white?: boolean;
height?: number;
interval?: number;
code?: boolean;
onReplay?: () => void;
completed?: boolean;
replay?: boolean;

Preview:

Download Details:

Author: nitrictech

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/nitrictech/react-animated-term

License: MIT