Terminal

Terminal is a text based user interface.

Enter "date" to display the current date, "greet {0}" for a message, "random" to get a random number and "clear" to clear all commands.

Welcome to PrimeReact

primereact $

Import via Module


import { Terminal } from 'primereact/terminal';
import { TerminalService } from 'primereact/terminalservice';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/terminal/terminal.min.js"></script>

Getting Started

Commands are processed using an EventBus implementation called TerminalService. Import this service into your component and subscribe to the command event to process the commands by sending replies with the response event. Also, all commands can be cleared using the clear event


export const TerminalDemo = () => {

    const commandHandler = (text) => {
        let response;
        let argsIndex = text.indexOf(' ');
        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;

        switch (command) {
            case 'date':
                response = 'Today is ' + new Date().toDateString();
                break;

            case 'greet':
                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
                break;

            case 'random':
                response = Math.floor(Math.random() * 100);
                break;

            case 'clear':
                response = null;
                break;

            default:
                response = 'Unknown command: ' + command;
                break;
        }

        if (response) {
            TerminalService.emit('response', response);
        }
        else {
            TerminalService.emit('clear');
        }
    }

    useEffect(() => {
        TerminalService.on('command', commandHandler);

        return () => {
            TerminalService.off('command', commandHandler);
        }
    }, []);

    return (
        <Terminal welcomeMessage="Welcome to PrimeReact" prompt="primereact $" />
    );
}

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
welcomeMessage	string	null	Initial text to display on terminal.
prompt	string	null	Prompt text for each command.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-terminal	Container element.
p-terminal-content	Content of terminal.
p-terminal-prompt	Prompt text.
p-terminal-response	Command response.
p-terminal-input	Input element to enter commands.