XTerm-React

React component wrapper for XTerm.js to simplify integration into any React project supporing React 18.

This project takes heavy insperation from xterm-for-react by robert-harbison and also this Gist.

Getting Started

Installation

You can install XTerm-React using the following commands:

NPM:

npm install xterm-react

Yarn:

yarn add xterm-react

Simple Echo Example

• Clone the repo git clone https://github.com/reubenmorgan/xterm-react.
• Open a terminal change to the examples directory in the repo.
• Run npm i to install the required packages.
• Start the example with npm start.

Basic Terminal Example

// Import React
import React, { useState } from 'react';

// Import XTerm-React
import { Xterm } from 'xterm-react';

function App() {
    const [Terminal, setTerminal] = useState(null);
    const [input, setInput] = useState('');

    const onTermInit = (term) => {
        setTerminal(term);
        term.reset();
        term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
    };

    const onTermDispose = (term) => {
        setTerminal(null);
    };

    const handleData = (data) => {
        if (Terminal) {
            const code = data.charCodeAt(0);
            // If the user hits empty and there is something typed echo it.
            if (code === 13 && input.length > 0) {
                Terminal.write("\r\nYou typed: '" + input + "'\r\n");
                Terminal.write('echo> ');
                setInput('');
            } else if (code < 32 || code === 127) {
                console.log('Control Key', code);
                // Disable control Keys such as arrow keys
                return;
            } else {
                // Add general key press characters to the terminal
                Terminal.write(data);
                setInput(input + data);
            }
        }
    };

    return (
        <div className="App">
            <header className="App-header">
                <Xterm
                    onInit={onTermInit}
                    onDispose={onTermDispose}
                    onData={handleData}
                />
            </header>
        </div>
    );
}

export default App;

License

Distributed under the MIT License. See LICENSE for more information.