Utilities

safeRenderToString

The library exposes a utility function called safeRenderToString that safely renders a JSX element to a string using React and rehype. This function takes a JSX element as input and returns the rendered HTML string.

The function first converts the JSX element to a React component using renderToString from the react-dom/server package. Then, it parses the resulting HTML string into an HTML AST (Abstract Syntax Tree) using rehype-parse. Next, it converts the HTML AST back to a React component using rehype-react. Finally, it converts the React component back to an HTML string using rehype-stringify. The resulting HTML string is returned.

Example:

import { safeRenderToString } from '@envoy1084/react-terminal';
 
const jsxElement = <div>Hello, World!</div>;
 
const htmlString = safeRenderToString(jsxElement);

Clear Terminal

The clearTerminal function clears the terminal by updating the last cursor position.

Example:

import { clearTerminal } from '@envoy1084/react-terminal';
 
const clear = async () => {
  await clearTerminal();
};

Reset Terminal

The resetTerminal function resets the terminal by clearing the history from IndexedDB.

Example:

import { resetTerminal } from '@envoy1084/react-terminal';
 
const reset = async () => {
  await resetTerminal();
};

Write to Terminal

The writeToTerminal function adds the provided value to the terminal history. If the value is a string, it is added directly. If the value is an object, the html property of the object is converted to a string using the safeRenderToString function before adding it to the history.

Example:

import { writeToTerminal } from '@envoy1084/react-terminal';
 
const stringValue = 'Hello, world!';
await writeToTerminal(stringValue);
 
const htmlValue = {
  html: <div>Hello, world!</div>,
};
 
await writeToTerminal(htmlValue);