README.md

react-console

Simple React.js console emulator.

See the live demo.

Installation

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

Features

• Readline emulation
• Mobile friendly
• Input Method Editor (IME) support

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.

Props

Properties you can pass to the console element

Prop	Type	Description
autofocus?	bool	Autofocus the console on component mount.
cancel?	function(): any	Function that should stop execution of the current command and call this.return().
complete?	function(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?	function(prompt: string): bool	Return a boolean indicating whether to continue asking for user input on a newline given the current prompt text (prompt).
handler	function(command: string): any	Handle a command (command), logging data with this.log() or this.logX(), and calling this.return() when finished.
promptLabel?	string	function(): string
welcomeMessage?	string	Initial message displayed after mount.

Public members

Member	Type	Description
log	function(...messages: any): void	Log messages to the console. If string, print the value, otherwise, print the JSON value of the message.
logX	function(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	function(): void	Signal the current command has finished and a new prompt should be displayed.

Awknoledgements

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