react-component-console 
A console emulator component for React.
Features
- Highly customizable console emulator
- Callbacks
Quick start
- Install the
react-component-consoledependency
npm i -S @haensl/react-component-consoleor
yarn add @haensl/react-component-console- Use it in your React app
import Console from '@haensl/react-component-console';
// ...
class MyComponent extends React.Component {
// ...
render() {
return (
<Console lines={[
'Hi!',
'How are you today?'
]} />
);
}
}
export default MyComponent;Customize
The following properties let you customize component behaviour.
- lines: The the text to write.
-
callbacks: Supply callbacks for written line(s).
- onFinishWritingLine: Callback for individual lines.
- onFinishWritingLines: Callback for all lines.
-
console: Customize Console behaviour.
- append: Whether or not to append lines.
- typing: Customize how the Console types text.
- styling/CSS classes: Customize CSS class names to use for the Console component.
-
line: Customize the Line component.
- styling/CSS classes: Customize CSS class names used for the Line component.
-
ps1: Customize the PS1 component.
- styling/CSS classes: Customize CSS class names used for the PS1 component.
- content: Customize the content rendered as PS1.
-
cursor: Customize the Cursor component.
- styling/CSS classes: Customize CSS class names used for the Cursor component.
- blinking: Customize if/how fast the Cursor blinks.
Lines lines
Specify the string or array of strings to write.
Example
<Console lines={[
'Hi!',
'How are you today?'
]} />Callbacks
onFinishWritingLine
Provide a callback which is called for every line that was written. The callback receives the line as parameter.
Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
onFinishWritingLine={
(line) => {
console.info('Console has finished writing line', line);
}
}
/>
onFinishWritingLines
Provide a callback which is called when all lines have been written. The callback receives the lines as parameter.
Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
onFinishWritingLines={
(lines) => {
console.info('Console has finished writing all lines', line);
}
}
/>
Console console
The console property lets you customize console behaviour.
Appending console.append
Set this property to true to append lines instead of writing them one by one.
Typing console.typing
react-component-console features highly cusomizable human-like typing behaviour. The following options let you fine tune typing the way you want.
console.typing.char
This object lets you specify typing behaviour concerning a single character. For every character a new delay is calculated depending on the average character delay and a deviation. If you, e.g. specify an average delay of 100ms and a deviation of 0.2 (or 20%), you end up with character typing delays between 80ms and 120ms.
Signature
{
avgMs: 150, // average milliseconds to type a character
deviation: 0.3, // deviation to apply to avgMs
minMs: 50, // minimum milliseconds to type a character
maxMs: Number.MAX_SAFE_INTEGER // maximum milliseconds to type a character
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
console={{
typing: {
char: {
avgMs: 100, // 100 ms average time to write a character
deviation: 0.2, // deviate typing delay by 20 %
minMs: 80 // take at least 80ms to write a character
}
}
}}
/>
console.typing.line
This object lets you specify details concerning typing of a line. It works analogous to console.typing.char in the sense that you specify the average delay between lines (i.e. how long it takes to hit the return button) and a deviation from this average.
Signature
{
delay: {
avgMs: 1000, // average delay between lines in milliseconds, i.e. time to hit return
deviation: 0.3, // deviation to apply to avgMs
minMs: 50, // minimum delay between lines in milliseconds
maxMs: Number.MAX_SAFE_INTEGER // maximum delay between lines in milliseconds
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
console={{
typing: {
line: {
avgMs: 600, // 600 ms average delay between lines
deviation: 0.2, // deviate line delay by 20 %
minMs: 500 // delay at least by 500ms to between lines
}
}
}}
/>Styles/CSS-classes
The Console component uses standard CSS classes for styles. You can overwrite any styles in your own stylesheets and you can supply your own class names as well.
console.classes
Use this object to customize Console component class names.
Signature
{
classes: {
element: 'Console' // class name assigned to the wrapping element
}
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
console={{
classes: {
element: 'My-Console' // use .My-Console instead of the default .Console class name
}
}}
/>Line
The line property lets you customize the Line component used by Console to render lines.
Styles/CSS-classes
line.classes
Use this object to customize class names of the Line component. You can overwrite any styles in your own stylesheets and you can supply your own class names.
Signature
{
classes: {
element: 'Console-Line', // class name assigned to the Line element
content: 'Console-Line-content' // class name assigned to the content, i.e. text, rendered in a line
}
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
line={{
classes: {
element: 'My-Line' // use .My-Line instead of the default .Console-Line class name
}
}}
/>PS1
The ps1 property lets you customize the PS1 component.
Styles/CSS classes
ps1.classes
Use this object to customize class names of the PS1 component. You can overwrite any styles in your own stylesheets and you can supply your own class names.
Signature
{
classes: {
element: 'Console-PS1', // class name assigned to the PS1 element
}
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
ps1={{
classes: {
element: 'My-PS1' // use .My-PS1 instead of the default .Console-PS1 class name
}
}}
/>Content
ps1.content
Use this property to customize the PS1 content rendered in the Console.
Signature
{
content: '$' // display a dollar sign as PS1
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
ps1={{
content: '~' // display a tilde instead of the default dollar sign
}}
/>Cursor
The cursor property lets you customize the Cursor component rendered in the Console.
Styles/CSS classes
cursor.classes
Use this object to supply your own class names for the Cursor component. You can overwrite any styles in your own stylesheets and you can supply your own class names.
Signature
{
classes: {
blink: 'Console-Cursor--blink', // class name to assign when the Cursor is blinking
element: 'Console-Cursor', // class name to assign to the Cursor component
write: 'Console-Cursor--write' // class name to assign when the Cursor is in writing state
}
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
cursor={{
classes: {
blink: 'My-Console-Cursor--isBlinking', // use this instead of the default for blinking state
element: 'My-Console-Cursor', // use this instead of the default for the Cursor component
write: 'My-Console-Cursor--isWriting' // use this instead of the default for writing state
}
}}
/>Blink interval
cursor.intervalMs
Use this property to specify how rapidly the Cursor should blink.
Signature
{
intervalMs: 400 // blink for 400ms on and off
}Example
<Console
lines={[
'Hi!',
'How are you today?'
]}
cursor={{
intervalMs: 250 // blink faster then the default 400ms
}}
/>