Make Changes and Test Quickly

Clone Package

git clone https://github.com/vlt-ai/volt-terminal.git

Install yalc which is a local npm package manager

yarn global add yalc

Build the terminal project and publish it locally to yalc.

yarn build && yalc publish

Replace the installed version with the locally built package in ragnarok.

yalc add volt-terminal

Install dependencies to ragnarok.

yarn install

Update the terminal package locally and instantly see changes anywhere package was added.

yarn build && yalc push

Installation

You MUST login to npm with the vlt-ai scope in order to install this package

npm login --scope=@vlt-ai --registry=https://npm.pkg.github.com

Install package with NPM or YARN and add it to your development dependencies:

npm install @vlt-ai/[email protected]

OR

yarn add @vlt-ai/[email protected]

Usage

import { ReactTerminal } from "@vlt-ai/volt-terminal";

function MyComponent(props) {
  // define custom text here
  const custom = (command: string) => {}

  return (
    <ReactTerminal
      commandPassThrough={custom}
    />
  );
}

Also make sure to wrap the main mountpoint around the TerminalContextProvider. This retains the state even when the component is unmounted and then mounted back:

import { TerminalContextProvider } from "@vlt-ai/volt-terminal";

ReactDOM.render(
  <TerminalContextProvider>
    <App/>
  </TerminalContextProvider>,
  rootElement
);

Creating custom themes

The component comes with few in-built themes: light, dark and dracula. You can create a custom themes by passing themes parameter in props, as follows:

<ReactTerminal
  commands={commands}
  themes={{
    myCustomTheme: {
      themeBGColor: "#272B36",
      themeToolbarColor: "#DBDBDB",
      themeColor: "#FFFEFC",
      themePromptColor: "#a917a8"
    }
  }}
  theme="myCustomTheme"
/>

Props

| name | description | default | |--|--|--| | theme | Theme of the terminal | "light" | | themes | Themes object to supply custom themes | null | | showControlButtons | Whether to show the control buttons at the top of the terminal | true | | prompt | Terminal prompt | >>> | commandPassThrough | propagates input text to any custom function you would like | blockInput | blocks user from typing in the terminal in case you run asynchronous tasks | isLoading | replaces terminal screen with a loading bar in case you're dependent on some external factor whilst using the terminal | welcomeMessage | A welcome message to show at the start, before the prompt begins | null | enableInput | Allows a user to type into the terminal | true | caret | Determines whether or not the caret highlight is shown at the end of the typed text | true