1.1.0 • Published 1 year ago

react-termynal-new v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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;

example

Props

App

PropTypeDefaultDescription
idstringtermynalThe id of the terminal
titlestringbashThe title of the terminal
flexbooleanfalseWhether to make height of terminal flexible
startDelaynumber600The delay before the terminal starts typing
typeDelaynumber90The delay between each character typed in input line
lineDelaynumber1500The delay between each line
progressLengthnumber40The length of the progress bar
progressCharstringThe character to use for the progress bar
progressPercentnumber100The percentage of the progress bar to fill
cursorstringThe character to use for the cursor
childrenReactElement[][]The lines to render in the terminal

DataLine

PropTypeDescription
typestringThe type of the element. Can be 'input', 'progress', or '' as pure text line
cursorstringThe character to use for the cursor
valuestringThe value of the element
delaynumberThe delay before the element is rendered
typeDelaynumberThe delay between each character typed in input line
promptstringThe prompt to use for input lines
progressLengthnumberThe length of the progress bar
progressCharstringThe character to use for the progress bar
progressPercentnumberThe percentage of the progress bar to fill
1.1.0

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.1.0

1 year ago