Xterm.js: How To Hide Xterm-helper-textarea?

I try to use Xtermjs in Reactjs. but when I follow the guide. the result shows as following: It should show without top textarea and text 'W'. My codes is as following: import Rea

Solution 1:

Finally I got this. For those who have this problem. you should import xterm css style file. like following:

import React from 'react';
import { Terminal } from 'xterm';
import './xterm.css';
import { FitAddon } from 'xterm-addon-fit'; 

class XTerminal extends React.Component {
    componentDidMount() {
        const {id} = this.props;
        const terminalContainer = document.getElementById(id);
        const terminal = new Terminal({cursorBlink: true});
        const fitAddon = new FitAddon();
        terminal.loadAddon(fitAddon);
        terminal.open(terminalContainer);
        terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
        fitAddon.fit();
    }

    render() {
        return(
            <div id={this.props.id}></div>
        )
    }
}

export default XTerminal;