astralarya / react-console Goto Github PK
View Code? Open in Web Editor NEWSimple react console emulator
Home Page: https://astralarya.github.io/react-console/
License: GNU General Public License v3.0
Simple react console emulator
Home Page: https://astralarya.github.io/react-console/
License: GNU General Public License v3.0
I'd like to have a way to configure a non-blinking cursor. Thanks!
I've modified the simple echo demo to include a button which calls .log()
with some text when pressed.
The app will throw an exception if the very first thing I do is press the button. If, however, I first enter some text (including a CR) the button works correctly.
The exception is:
TypeError: Cannot read property 'message' of undefined
default_1.log
C:/Users/Admin/Documents/Work/console-bug/node_modules/react-console-component/lib/react-console.js:151
148 | messages[_i - 0] = arguments[_i];
149 | }
150 | var log = _this.state.log;
> 151 | log[_this.state.log.length - 1].message.push({ value: messages });
152 | _this.setState({
153 | log: log,
154 | }, _this.scrollIfBottom());
Source for App.js (using react-console-component 0.6.1):
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Console from 'react-console-component'
import 'react-console-component/main.css'
class App extends Component {
child: { console?: Console } = {}
echo = (text) => {
this.child.console.log(text)
this.child.console.return()
}
click = () => {
this.echo("I was clicked!!!")
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Console ref={ (r) => this.child.console = r}
handler={this.echo} autofocus={true} />
<button onClick={this.click}>Click Me</button>
</div>
);
}
}
export default App;
Hi,
I'd like to insert a command from code. e.g. when a user clicks a macro-button, I want to pre-fill the console with a command. Is that possible?
Thanks!
Is there a way to clear the console?
In the case when this.state.log is empty array, JS runtime error is thrown.
"Uncaught TypeError: Cannot read property 'message' of undefined"
I want to put some strings to the console without user input. But it crashes with
Uncaught TypeError: Cannot read property 'message' of undefined
at default_1.log (react-console.js:151)
If I input something in the console, and then use a method to call
myconsole.log('blablabla');
myconsole.return();
without input handler to log a line to the console. It can show but the length seems some problem, it can show the blablabla
and return a new line. But if I call this method once again, the new blablabla
is append to the old one, ahead of the label
Any chance of being able to paste things in with Ctrl+V?
Where would be a good spot to start looking to integrate that?
Not really an issue but rather a feature request.
I really like this little console and almost the only thing I miss after the latest update is a way to clear my input:
In bash I can cancel the command I typed by pressing Crtl+C, a new line will be startet and the result will looks like this:
> asdf^C
>
What do you think?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.