@bgoodman/react-console-component

React Console Component

A React component that provides a console-like interface for displaying the output of commands and to capture user input. The component itself does not provide any functionality for executing commands.

Installation

npm install @bgoodman/react-console-component

Usage

import { Console } from '@bgoodman/react-console-component'

const App = () => {
    const onInit = (): Promise<string> => {
        // do something when the console is initialized.
        const output = new Date().toString()
        // return the console output as a promise.
        return Promise.resolve(output)
    }

    const evalCmd = (cmd: string): Promise<string> => {
        // do something with the input command.
        const result = eval(cmd).toString()
        // return the result as a promise
        return Promise.resolve(result)
    }

    return (
        <Console
            onEnter={execCode}
            onInit={onInit}
            prompt="$"
            height="300px"
            autoScroll
        />
    )
}

Props

Prop	Type	Default	Description
onEnter	(cmd: string) => Promise<string>	undefined	Function to execute when the user presses 'Enter'.
onInit	() => Promise<string>	undefined	Function to execute when the console is initialized.
prompt	string	"$"	The prompt string.
height	string	"300px"	The height of the console.
autoScroll	boolean	true	If true, the console will automatically scroll to the bottom when new content is added.
theme	DefaultTheme	See 'Themes' section.	A custom theme to use for the console. If not provided, the default light theme will be used.

Themes

The console component uses the styled-components library to style the console. You can provide your own theme by passing a DefaultTheme object to the theme prop. For example, the default theme is defined as:

const lightTheme: DefaultTheme = {
    font: {
        size: '16px',
        family: 'monospace'
    },
    colors: {
        background: '#FFFFFF',
        text: '#5F6368'
    },
}

Additional themes can be defined as needed. For example, a dark theme could be defined as:

const darkTheme: DefaultTheme = {
    font: {
        size: '16px',
        family: 'monospace'
    },
    colors: {
        background: '#272822',
        text: '#F8F8F2'
    },
}

Reserved Commands

The console component reserves the following commands:

• clear - Clears the console output.