Xterm.js for React
npm install react-xtermjsA React library to use the powerful of Xterm.js
NPM:
``sh`
npm install @xterm/xterm react-xtermjs
Yarn:
`sh`
yarn add @xterm/xterm react-xtermjs
#### useXTerm hook:
`js
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
####
component:`js
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 (
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.