bony2023/react-terminal

🚀 React component that renders a Terminal 🖥

🚀 React component that renders a Terminal 🖥

Features • Installation • Usage • Props • Report a bug

Features

• Mobile support. 📱
• Customizable commands, prompt and error message. ✅
• Support callbacks(async/non-async) for commands. 🔄
• Command history using arrow up and down. 🔼
• Support for copy/paste. 📋
• In-built themes and support to create more. 🚀

Installation

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

npm install react-terminal

OR

yarn add react-terminal

Usage

import { ReactTerminal } from "react-terminal";

function App(props) {
  // Define commands here
  const commands = {
    whoami: "jackharper",
    cd: (directory) => `changed path to ${directory}`
  };

  return (
    <ReactTerminal
      commands={commands}
    />
  );
}

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 "react-terminal";

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

Creating custom themes

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

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

Props

name	description	default
welcomeMessage	A welcome message to show at the start, before the prompt begins. Value can be either a string or JSX	null
prompt	Terminal prompt	>>>
commands	List of commands to be provided as a key value pair where value can be either a string, JSX/HTML tag or callback	null
errorMessage	Message to show when unidentified command executed, can be either a string, JSX/HTML tag or callback	"not found!"
enableInput	Whether to enable user input	true
showControlBar	Whether to show the top control bar	true
showControlButtons	Whether to show the control buttons at the top bar of the terminal	true
theme	Theme of the terminal	"light"
themes	Themes object to supply custom themes	null
defaultHandler	Default handler to be used (if provided) when no commands match. Useful when you don't know list of commands beforehand/want to send them to server for handling.	null

In-built commands

command	description
clear	clears the console

Report a bug

If you found a bug in this library, please file an GitHub issue here.

react-terminal's Issues

Keyboard not being invoked in android

The keyboard does not pop up on mobile devices when you click on the terminal.

Checked on Android 10 and 13.
Browsers: chrome, firefox
Version package: 1.3.0

Tested page: react-terminal.surge.sh

How to pass JSX/HTML as command value

The documentation says
List of commands to be provided as a key value pair where value can be either a string, JSX/HTML tag or callback
But how to pass this value ?
I'm doing this

 const commands = {
    whoami: "Abhishek Jha",
    about:
      "<h1>I'm Abhishek Jha.</h1> <br/> Competitive programmer & Full stack developer.",
    cd: (directory) => `changed path to ${directory}`,
  };

Am I doing any mistake in syntax or this doesn't work ?

Empty spaces are getting automatically removed

Reproduction step

Setup example Component

enter
cd aaaaa bbbbbbb

expected output:
cd aaaaa bbbbbbb
actual output:
cd aaaaa bbbbbbb

support copy/paste

good afternoon, love the terminal! Great job.

Found a quick lil bug with copy/paste. Looked at the code and cannot find it implemented.

Let me know if this is a use-case that is being worked on or point me to the place where I can implemented and ill submit a pr, thanks!

Feature request: width of terminal in number of characters

Summary

To my knowledge there is no way to determine the # of characters the terminal can support at one time. It would be nice to have a simple Terminal.width property which could tell us this information

My current jank fix

Grab the client width of the terminal and divide by 12 (12 seemed to be the sweet spot, not sure if this is specific to my machine or not)

    function get_max_number_of_characters () {
        const width = document.getElementById('terminal_container').clientWidth
        const max_number = Math.floor(width / 12)
        return max_number
    }

Results:

Really cool stuff!

warning Uncaught TypeError: Cannot read properties of null (reading 'bufferedContent')

Uncaught TypeError: Cannot read properties of null (reading 'bufferedContent')

"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.47",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"

my react version is 18.0

at component version v1.28 warning like

Uncaught TypeError: Cannot read properties of null (reading 'bufferedContent')
    at h (index.es.js:1:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Programatically run commands

Is it possible to run commands or just print things to the terminal without actually typing in a command? At the moment the following code runs (console.log works), but just doesnt print anything in the terminal. Seems unusual.

Example:

const welcomeMessage = (
    <span>
        <span style={link} onClick={() => commands.copy()}>
          Click here
        </span>{" "}
        to try to run a function to print to terminal.
      </span>
  );

const commands = {
    copy: () => {
      console.log("success?");
      return <span>Success!</span>;
    }
  };

EDIT ON CODESANDBOX

`welcomeMessage` not adding line break

The welcomeMessage is output on the same line as what should be the preceeding line.

See: https://x42pi.csb.app/

Adding a option to push messages from outside the terminal

For example, adding push message from event listener to the terminal

Multiline output

In the README picture you have a detailed multiline output, how is this accomplished?

Prop to remove the cursor(caret)

Hi! Your component works great! I am trying to combine it with an auto typing animation. What could be very handy is a prop to disable handleKeyDown functionality entirely or with delay, as well as removing the blinking cursor. I am looking for an open-source project to work on and I would love to take the above issues on as a challenge if you let me!

Remove Google Fonts as a mandatory dependency

Hey there,

this one looks great. Is there any chance to remove Google Fonts as a mandatory dependency?

Thanks a lot!

Bug in mobiile view: Scrolls to top of application when clicked (touch in mobile).

Duplicate responses on two terminals

Firefox copy paste TypeError: navigator.clipboard.readText is not a function

When attempting to paste using Firefox the error TypeError: navigator.clipboard.readText is not a function appears and the paste does not succeed. Based on https://stackoverflow.com/questions/67440036/navigator-clipboard-readtext-is-not-working-in-firefox it looks like Firefox requires a different API call for pasting (compared to Chrome).

Theme level styling for error messages

Styling error messages as a prop on <ReactTerminal> like this errorMessage={<span style={{color: 'red'}}>Command not found</span>}, looks fine on client side, just throws Warning: Failed prop type: Invalid prop `errorMessage` of type `object` supplied to `C`, expected `string`.,

Support on a theme level could be useful. I would imagine something would need to be edited around here in addition to the theme objects, but I'm not really sure how to go about it myself.

TypeError: Cannot read properties of null (reading 'bufferedContent')

at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:18687:23) at update.callback (node_modules/react-dom/cjs/react-dom.development.js:18720:5) at callCallback (node_modules/react-dom/cjs/react-dom.development.js:13923:12) at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:13944:9) at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23391:13) at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9) at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)

what should i do ? all of my tests are fails when i render the react-terminal component !

Example of programmatically running commands

An example in README.md of running commands programmatically.

ability to add any command

I'd like to be able to run a callback on any string that is input and not have specific commands.

Something like this:

<ReactTerminal
    commands={{
        '*': handleCommand
    }}
/>

My commands are sent to a server which does the validation so I don't know them upfront.

It would be nice to have mobile functionality

Was it a choice to not make it for mobile? Or does it break something if used on a mobile so mobile usage was let go? I'm really curious. I made a project using react-terminal and later found out that it wouldn't function as expected on my phone. So I had to scrap all the responsiveness for that project and instead just asked the user to please open the app on a desktop. Anyway, amazing work @bony2023 and everyone involved!

Multiple arguments in command functions

Is it possible to somehow have multiple function arguments in commands? ie.

const commands = {
  email: (message, address) => `"${message}" sent to "${address}"` 
}

The current behaviour of running email message address just includes the value of both arguments in the first argument, leaving the second undefined. Is there a way to seperate them?

Upgrade react peer dependency to 17 or later from current 16 version

Support for JS/TS default parameters

Hello there, react-terminal is causing some hydration warnings cause I have uploaded a screenshot for further details. It's a simple issue with a simple fix.
I believe the issue is caused by the defaultprops object at /src/components/Terminal.tsx
which can easily be fixed using destructuring of props ( just a quick hacky fix )

import React from 'react';

// Default Props with destructuring
export default function Terminal(props: any) {
  const { prop1 = 'value', prop2 = 'value', ...restProps } = props;
  return(
      <Component/>
  )
}

Keyboard not being invoked in android

While using the terminal in android chrome, the terminal on focus is not bringing the keyboard into the view.
Only with the soft keyboard, a user can type in commands when using the terminal in smart phones

autocomplete and custom styles

is it possible to add autocomplete and custom styles?

Additional user inputs after command

Wonder if it is currently possible for additional user prompts. For example, take the following interaction:

>>> create-resource
Name of resource? hello-world
How big is the resource (1-5)?: 4
Resource created!
>>>

In this example, user types in create-resource and is asked additional prompts. I'm willing to do the implementation myself but want to make sure it isn't possible already, and if not, any gotchas/obvious paths to go down for the implementation.

Output of the defaultHandler not preserving new line characters.

For my use case, I had to use the defaulthandler to make an api call to fetch the result for the command and return a promise with the response for the command.
Command response has "\n" characters and its not getting preserved.
Proposed solution:-
The span html element for the default handler output doesnt have a "whitespace" : "pre-wrap" style and hence its not preserving it.

Run commands upon button press

Is it possible to run commands via button press?

For example

import React from "react";

function CommandButton() {
	return (
		<button 
			onClick={() => ReactTerminal.cd("home")}
		>
			Run Command
		</button>
	);
}

export default CommandButton;

feat: edit terminal font-size

It would be really nice if we could change the size of the font used in the terminal, allowing for more responsive font sizes depending on the size of the screen being used.

pass all inputs to one function

Support for multiline input

It would be great to have multiline input like the chrome console or even a regular terminal by pasting

Run `clear` on eventHandler

I had checked #63 and #173 but couldn't find a way to run clear when the terminal panel re-opened.

Also is there an option to remove welcomeMessage when clear is called?

Terminal Cursor

Terminal cursor not show on mobile view until focus on terminal don't have any focus point active i m try multiple way to focus the terminal but not working

Mobile breaks with Next ThemeProvider wrapper

It adds a text input that blocks the correct usage.

https://github.com/pacocoursey/next-themes

To re-create the bug create a next.js project with next-themes and wrap like so:

import { ThemeProvider } from 'next-themes'
export default function App({ Component, pageProps }: AppProps) {
  return (
      <TerminalContextProvider>
        <ReactTerminal />
      </TerminalContextProvider>
})

remove top bar?

Is there a way to remove the top bar with the red/yellow/green buttons? The look clashes with my project, and the buttons don't seem to work.

bug(mobile): jumps to top of page onfocus

Tried to figure out what was causing this but could not; behaves as if it is <a href="#" /> or something, page scrolls to top when you focus by clicking the input.

I think it has to do with setClickedInside().