1.4.5 • Published 4 years ago
react-io-terminal v1.4.5
React-io-terminal
This is a simple terminal component that you can embed into your site. It is meant to function very simply. You give it visual configuration options as props, as well as a handler function. This handler gets the raw user input as a parameter and can return an array of strings (even one string). The returned strings are the lines printed as a response to the user input.
Installation
Install react-io-terminal from npm
npm i react-io-terminal
Demo
View the demo here: https://terminal-demo.ktj.st
Example usage
import React from "react";
import Terminal from "react-io-terminal";
function App() {
const handler = (input) => {
if (input === "ping") return "pong";
return [`You typed: ${input}`, `It was ${input.length} characters long`];
};
return (
<div className="App">
<div
style={{ width: "500px", height: "500px" }}
className="shellcontainer"
>
<Terminal
Config={{
fontSize: "20px",
font: "Arial",
handler: handler,
handlerOutPrefix: "+",
userOutPrefix: "-",
}}
></Terminal>
</div>
</div>
);
}
export default App;
Config options
prefix (the terminal prefix before user input, default value: ">")
userOutPrefix (the terminal prefix before user typed lines in the input history, default: "<")
handlerOutPrefix (the prefix before things your handler sends to the terminal, default: "[callback]")
handler (the function that handles user input, default is a function that returns "OK" every time.)
textColor (the color of the text in the terminal, default: "white")
background (the color of the background, default: "blue")
font (the font of the text in the terminal, default: "monospace")
fontSize (the size of the font in the terminal, default "1em")
getFocusOnRender (Gets focus to the terminal input when rendered, default: false)