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.

License

kobra-dev/react-console

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages