React-Termynal-New

react-termynal-new is another react wrapper around the css/javascript library termynal.js.

Installation

npm install react-termynal-new

Usage

import React from 'react';
import {App as Termynal, DataLine} from 'react-termynal-new';

const App = () => {
  return (
    <Termynal>
      <DataLine type="input">pip install spacy</DataLine>
      <DataLine type="progress"></DataLine>
      <DataLine>SUCCESS: spacy-2.0.18-cp36-cp36m-win_amd64.whl is in your current directory.</DataLine>
      <DataLine></DataLine>
      <DataLine type="input">python -m spacy download en</DataLine>
      <DataLine type="progress"></DataLine>
      <DataLine>Installed en_core_web_sm-2.0.0</DataLine>
      <DataLine></DataLine>
      <DataLine type="input">python</DataLine>
      <DataLine type="input" prompt=">>>">import spacy</DataLine>
      <DataLine type="input" prompt=">>>">nlp = spacy.load('en')</DataLine>
      <DataLine type="input" prompt=">>>">doc = nlp("Hello world!")</DataLine>
      <DataLine type="input" prompt=">>>">print([(w.text, w.pos_) for w in doc])</DataLine>
      <DataLine type="output">[('Hello', 'INTJ'), ('world', 'NOUN'), ('!', 'PUNCT')]</DataLine>
    </Termynal>
  );
};

export default App;

Props

App

| Prop | Type | Default | Description | |-----------------|----------------|------------|------------------------------------------------------| | id | string | termynal | The id of the terminal | | title | string | bash | The title of the terminal | | flex | boolean | false | Whether to make height of terminal flexible | | startDelay | number | 600 | The delay before the terminal starts typing | | typeDelay | number | 90 | The delay between each character typed in input line | | lineDelay | number | 1500 | The delay between each line | | progressLength | number | 40 | The length of the progress bar | | progressChar | string | █ | The character to use for the progress bar | | progressPercent | number | 100 | The percentage of the progress bar to fill | | cursor | string | ▋ | The character to use for the cursor | | children | ReactElement[] | [] | The lines to render in the terminal |

DataLine

| Prop | Type | Description | |-----------------|--------|------------------------------------------------------------------------------| | type | string | The type of the element. Can be 'input', 'progress', or '' as pure text line | | cursor | string | The character to use for the cursor | | value | string | The value of the element | | delay | number | The delay before the element is rendered | | typeDelay | number | The delay between each character typed in input line | | prompt | string | The prompt to use for input lines | | progressLength | number | The length of the progress bar | | progressChar | string | The character to use for the progress bar | | progressPercent | number | The percentage of the progress bar to fill |