@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.

Try the demo here.

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) => {
        try {
            // do something with the input command.
            const result = eval(cmd).toString()
            // return the result as a promise
            return Promise.resolve(result)
        } catch (err) {
            return Promise.resolve(err.toString())
        }
    }

    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	Theme	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 Theme object to the theme prop. For example, the default theme is defined as:

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

const lightTheme: Theme = {
    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: Theme = {
    font: {
        size: '16px',
        family: 'monospace'
    },
    colors: {
        background: '#272822',
        text: '#F8F8F2'
    },
}

Reserved Commands

The console component reserves the following commands:

• clear - Clears the console output.