Auto Write Text

This fork of react-animated-term removes 2 dependencies and upgrades it to React 17

Credits

Original npm is react-animated-term

Usage

import Terminal from 'react-animated-term'

const termLines = [
  {
    'text': 'ls',
    'cmd': true
  },
  {
    'text': 'index.js    package.json    node_modules',
    'cmd': false
  },
  {
    'text': '',
    'cmd': true
  }
]

export default function example() {
  return (
    <Terminal
      lines={termLines}
      interval={80}
    />
  )
}

You can also render output that consists of frames by specifying the individual frames. With a framed output, the text field specifies the final output that should be rendered after all the frames have been rendered. Delays can also be specified for individual frames and commands.

import Terminal from 'react-animated-term'
const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
const termLines = [
  {
    text: 'node example.js',
    cmd: true,
    delay: 80
  },
  {
    text: '✔ Loaded app',
    cmd: false,
    repeat: true,
    repeatCount: 5,
    frames: spinner.map(spinner => ({
      text: spinner + ' Loading app',
      delay: 40
    }))
  },
  {
    text: '',
    cmd: true
  }
]

export default function example() {
  return (
    <Terminal
      lines={termLines}
      interval={80}
    />
  )
}

Styling

The original module contained styling options. This has not been ported over