XTerm.js for React

A React library to use the powerful of Xterm.js

Getting Started

Installation

NPM:

    npm install @xterm/xterm react-xtermjs

Yarn:

    yarn add @xterm/xterm react-xtermjs

Usage

useXTerm hook:

import React, { useRef, useEffect } from 'react'
import { useXTerm } from 'react-xtermjs'

const MyTerminal = () => {
  const { instance, ref } = useXTerm()
  instance?.writeln('Hello from react-xtermjs!')
  instance?.onData((data) => instance?.write(data))

  return <div ref={ref} style={{ width: '100%', height: '100%' }} />
}

XTerm component:

import React from 'react'
import { XTerm } from 'react-xtermjs'

const MyTerminal = () => {
  const onData = (data) => {
    console.log(`Received data: ${data}`)
  }

  const onResize = (cols, rows) => {
    console.log(`Terminal resized to ${cols} columns and ${rows} rows`)
  }

  return (
    <XTerm
      onData={onData}
      onResize={onResize}
      options={{ cursorBlink: true }}
      style={{ width: '100%', height: '100%' }}
    />
  )
}

For a full list of available parameters, refer to the XTerm.js documentation: XTerm.js Docs.
Plus, find a complete example with add-ons of our Console at Qovery here.

react-xtermjs is initiated and maintained by Qovery