Skip to content
This repository has been archived by the owner on Mar 24, 2022. It is now read-only.

vmware-archive/react-console

This branch is 28 commits ahead of snowak-cb/react-console:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4b45ac5 · May 24, 2018
Jul 8, 2016
Nov 30, 2017
Aug 20, 2016
Nov 30, 2017
Nov 27, 2017
Nov 30, 2017
Nov 30, 2017
Jun 15, 2016
Aug 7, 2016
Aug 15, 2016
May 24, 2016
Aug 2, 2017
Nov 30, 2017
Jun 17, 2016
Jul 8, 2016
Jun 17, 2016
Nov 30, 2017
May 24, 2018
Aug 18, 2016
Jun 12, 2017
Aug 18, 2016
Aug 18, 2016
Aug 7, 2016

Repository files navigation

react-console

Simple React.js console emulator.

NPM Version NPM Downloads Travis Build Coverage Status

Dependency Status devDependency Status peerDependency Status

Demo Image

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.

Packages

No packages published

Languages

  • TypeScript 76.4%
  • JavaScript 17.4%
  • CSS 5.0%
  • HTML 1.2%