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. Objects with type: 'link' will be output as links using the objects href, target, and text properties.
updateLastLog	(...messages: any)=>void	Replace the last message in the console. Useful for progress indicators.
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}.
logTable	(tableObject: Object[, type: string])=>void	Log tabular data to the console. tableObject has the format { headers: ['header 1', 'header 2'], rows: [['row 1, col 1', 'row 1, col 2'], ['row 2, col 1', 'row 2, col 2']]}. headers is optional. Rows can also contain objects which will be output as JSON strings or according to the type: link rules listed above. The optional type argument will be handled the same as in logX
return	()=>void	Signal the current command has finished and a new prompt should be displayed.
setBusy	()=>void	Block user input as though a command is being handled.
clearScreen	()=>void	Clear the visible log in the console. Does not clear command history.

Awknoledgements

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