How to align terminal text to the left in xterm js?

Question

XTerm js is a library to build web interfaces simulating a terminal, Im building a terminal using React JS and xterm.

So far I have this code and works, but I despite everything I try from the xterm docs, I can't make it ti align to the left:

This are the dependencies Im using related to xterm in case you try and need a dependency:

• react-xterm 2.0.4
• updated-xterm-for-react 5.0.0
• xterm 5.1.0
• xterm-addon-fit 0.7.0
• xterm-for-react 1.0.4

import React, { useEffect, useRef, useState } from "react";
import { XTerm } from "updated-xterm-for-react";

function Echo() {
  const init = "echo: ";

  const xtermRef = useRef(null);
  const [input, setInput] = useState("");

  useEffect(() => {
    // Add the starting text to the terminal
    xtermRef.current.terminal.write(init);
  }, []);

  // useEffect(() => {
  //   console.log({ input });
  //   xtermRef.current.terminal.clear();
  // }, [input]);

  const handleData = (data) => {
    console.log({ data });
    const code = data.charCodeAt(0);
    console.log({ code });
    if (code === 13) {
      submitHandler(input);
    } else if (code === 127) {
      // Handle backspace (code 127)
      // Remove the last character from the input
      const newInput = input.slice(0, -1);
      setInput(newInput);
      xtermRef.current.terminal.write("\b \b"); // Move cursor back and clear character
    } else {
      xtermRef.current.terminal.write(data);
      setInput((input) => `${input}${data}`);
    }
  };

  // const handleKey = (key) => {
  //   console.log(key);
  //   setInput(key.key);
  //   if (key.domEvent.keyCode === 13) {
  //     submitHandler(input);
  //   }
  // };

  // Your function to execute when Enter is pressed
  const submitHandler = (input) => {
    console.log("Executing function with input:", input);
    xtermRef.current.terminal.writeln("");
    xtermRef.current.terminal.focus();
    if (input.trim() === "clear") {
      clearHandler();
    }
    setInput("");
  };

  const clearHandler = () => {
    console.log("clearing");
    xtermRef.current.terminal.clear();
    xtermRef.current.terminal.write("\x1b[H\x1b[K\x1b[H");
  };

  return (
    <>
      {/* Create a new terminal and set its ref. */}
      <XTerm
        ref={xtermRef}
        onData={handleData}
        focus={true}
        // onKey={handleKey}
        options={{
          cursorBlink: true,
          theme: {
            background: "rgb(8 47 73)",
            foreground: "white",
            cursor: "yellow",
            selectionBackground: "yellow",
            selectionForeground: "black"
          },
          letterSpacing: 0,
          scrollback: 1000,
          fontFamily: "monospace",
          fontSize: 16
        }}
        style={{
          textAlign: "left"
        }}
      />
    </>
  );
}

export default Echo;

Answer 1

This cut it, setting the rendererType option to "canvas" and applying JSS to the container

return (
    <div style={{ textAlign: "left" }}>
      {/* Create a new terminal and set its ref. */}
      <XTerm
        ref={xtermRef}
        onData={handleData}
        focus={true}
        // onKey={handleKey}
        options={{
          cursorBlink: true,
          rendererType: "canvas",
          theme: {
            background: "rgb(8 47 73)",
            foreground: "white",
            cursor: "yellow",
            selectionBackground: "yellow",
            selectionForeground: "black"
          },
          letterSpacing: 0,
          scrollback: 1000,
          fontFamily: "monospace",
          fontSize: 16
        }}
        style={{
          textAlign: "left"
        }}
      />
    </div>
  );