volt-terminal v1.0.1

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/volt-terminal@1.0.2

OR

yarn add @vlt-ai/volt-terminal@1.0.2

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