A React library to use the powerful of Xterm.js
NPM:
npm install @xterm/xterm react-xtermjsYarn:
yarn add @xterm/xterm react-xtermjsimport 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%' }} /> }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 options={{ cursorBlink: true }} style={{ width: '100%', height: '100%' }} listeners={{ onData, onResize, }} /> ) }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