react-console

Simple React.js console emulator.

Example

Simple prompt that echoes back input:

let EchoConsole = React.createClass({
    echo: function(text) {
        this.refs.console.log(text);
        this.refs.console.return();
    },
    render: function() {
        return <Console ref="console"
            handler={this.echo}
            autofocus={true}
        />;
    }
});

See the example project used in the live demo.

Installation

npm install --save-dev react-console-component

Features

Readline emulation
Mobile friendly
Input Method Editor (IME) support

Props

Properties you can pass to the console element

Prop	Type	Description
autofocus?	bool	Autofocus the console on component mount.
cancel?	()=>any	Function that should stop execution of the current command and call `this.return()`.
complete?	(words: string[], cursor: number, prompt: string)=>string[]	Return a list of possible completions given a list of (`words`), index of the word containing the cursor (`cursor`) , and the full prompt text (`prompt`).
continue?	(prompt: string)=>bool	Return a boolean indicating whether to continue asking for user input on a newline given the current prompt text (`prompt`).
handler	(command: string)=>any	Handle a command (`command`), logging data with `this.log()` or `this.logX()`, and calling `this.return()` when finished.
promptLabel?	string \| ()=>string	String or function that generates a string displayed to prompt user for input.
welcomeMessage?	string	Initial message displayed after mount.

Public members

Member	Type	Description
log	(...messages: any)=>void	Log messages to the console. If string, print the value, otherwise, print the JSON value of the message.
logX	(type: string, ...messages: any)=>void	Log messages of a particular type to the console. The messages will be given the class `react-console-message-{type}`.
return	()=>void	Signal the current command has finished and a new prompt should be displayed.

Awknoledgements

React-console is inspired by chrisdone/jquery-console.

React-console