onData type is not recognized

[andrewasd]

Hi, i get the following error if I try to use the code:

Type '{ onData: (data: any) => void; onResize: (cols: any, rows: any) => void; options: { cursorBlink: true; }; style: { width: string; height: string; }; }' is not assignable to type 'IntrinsicAttributes & XTermProps'.
Property 'onData' does not exist on type 'IntrinsicAttributes & XTermProps'.

[andrewasd]

i managed to solve it, using listeners, but now i get, "document" is undefined,
probably because is a server component

import React from "react";
import { XTerm, XTermProps } from "react-xtermjs";

export const Terminal = () => {
  const onData = (data: any) => {
    console.log(`Received data: ${data}`);
  };

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

  // Add your own logic to handle user input and execute commands here
  return (
    <XTerm
      options={{ cursorBlink: true }}
      style={{ width: "100%", height: "100%" }}
      listeners={{ onData: onData, onResize: onResize }}
    />
  );
};

export default Terminal;

[RemiBonnet]

Hey @andrewasd!

Could you try this example? onData should not be in a listeners prop but should function like a props

Edit: the first error is with example?

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%' }}
    />
  )
}