jonmbake / react-terminal-ui

A terminal react component with support for light and dark modes.
https://jonmbake.github.io/react-terminal-ui/demo/
MIT License
205 stars 30 forks source link

Render HTML elements within Terminal #23

Closed FaresKi closed 2 years ago

FaresKi commented 2 years ago

Is your feature request related to a problem? Please describe. Is there a way to render HTML elements and tags inside the terminal text?

Describe the solution you'd like Maybe some documentation or an example that would describe what I want to do.

Describe alternatives you've considered None so far.

Additional context I've tried this:

{
      type: LineType.Output,
      value:
        "Hi 👋🏽, my name is Fares, and I'm a backend software engineer!\n" +
        "I love challenges, and live for the thrill of solving problems!\n" +
        'If you wish to contact me, please reach out via email: <a href="name@mail.com">here!</a>\n' +
        "So far, I've had the opportunity to work in 2 different organizations.\n" +
        "Please type 'exp' to see my professional experience 💼\n",
}

And unfortunately I haven't managed to make it work. Maybe I'm missing something? Either way, big fan! Fares

github-actions[bot] commented 2 years ago

Thank you for taking the time to submit an Issue! You should get a response to this issue within one to two days.

jonmbake commented 2 years ago

Hey @FaresKi . We should be able to easily add support for rendering HTML in the terminal. I think we just need to update the TypeScript type def to lineData: Array<{type: LineType, value: string | JSX.Element}>. Then to render HTML:

{type: LineType.Output, value: <div><p>Hi 👋🏽, my name is Fares, and I'm a backend software engineer!</p></div>},

I'll make the code update tomorrow.