react-console-emulator icon indicating copy to clipboard operation
react-console-emulator copied to clipboard

Is it possible to simulate typing?

Open BasedXeno opened this issue 4 years ago • 1 comments

Hi - thanks for making this software, it's great! I have a question - I would like the initial welcome message and subsequent messages to be printed to the screen 1 character at a time, with e.g. a 40ms delay. I've managed to use an interval + pushToStdout to do this, but each character is being printed on its own line, rather than in one line.

Is there an option I'm missing whereby I can simulate typing in this way, so that each pushToStdout can be configured to either print to a newline or to keep the new characters in the same line?

##UPDATE## I managed to get the effect I want, but it feels pretty hacky, I'd be happy to know if someone has a better solution!

  useEffect(() => {
    const welcomeMessageDelay = setInterval(() => {
      const terminal = terminalRef.current;
      // console.dir(terminal);
      let cachedInput =
        (terminal.state.stdout[0] && terminal.state.stdout[0].message) || "";
      terminal.clearStdout();
      terminal.state.stdout.push({
        message: (cachedInput += welcomeText.shift()),
      });
      terminal.setState({
        stdout: terminal.state.stdout,
      });
      if (welcomeText.length === 0) {
        clearTimeout(welcomeMessageDelay);
      }
    }, 80);
    return function clearTimer() {
      clearTimeout(welcomeMessageDelay);
    };
  }, []);

BasedXeno avatar Mar 29 '21 18:03 BasedXeno

You can use [react-type-animation] to use this and then after that, u can callback a function to clear the Screen.

Sanskar-tyagi avatar Aug 28 '23 07:08 Sanskar-tyagi