Getting Started

The Project follows a Compound component pattern. You can use the components to build your own terminal. Each Components extends from Either a div or textarea (in case of input textarea) element so you can pass the element props to the components.

The components are:

• Terminal: The main component that wraps all the other components.
• TerminalTitleBar: The Title bar of the terminal.
• TerminalWelcomeMessage: The Welcome message of the terminal.
• TerminalOutput: The Output area of the terminal.
• TerminalInputBox: The Input area of the terminal.
• TerminalLoader: The Loader component that shows when the terminal is loading.

It is recommended to follow the component order for proper functioning of the terminal.

import {
  Terminal,
  TerminalInputBox,
  TerminalLoader,
  TerminalOutput,
  TerminalTitleBar,
  TerminalWelcomeMessage,
} from '@envoy1084/react-terminal';
 
const MyComponent = () => {
  return (
    <Terminal>
      <TerminalTitleBar>
        <TerminalTitleBar.ActionGroup />
        <TerminalTitleBar.Title />
      </TerminalTitleBar>
      <TerminalWelcomeMessage />
      <TerminalOutput />
      <TerminalInputBox>
        <TerminalInputBox.Prompt />
        <TerminalInputBox.TextArea />
      </TerminalInputBox>
      <TerminalLoader />
    </Terminal>
  );
};
 
export default MyComponent;