What is the best way to create a new line in React that resembles a terminal?

Question

What is the best way to create a new line in React that resembles a terminal?

What technologies am I working with?

I am currently using React and CSS modules in my development

Greetings! I am in the process of creating a website for a Portfolio Terminal

I have a vision to incorporate a feature where users can simulate creating a new line, similar to how terminals operate. When Enter is pressed in the terminal, it generates a new line like this: Terminal New Line Image

However, I have encountered an issue where after pressing enter and attempting another command, it fails to execute the command

I hope that explanation was clear enough

Below is the JSX code snippet:

// JS code here...
// Import statements and component definition

export default TerminalPage;

And if necessary, here are the associated styles:

:root {
  --main-text-color: #a16b56;
  --text-input-color: #73abad;
  --main-color: #e2d7a7;
  --text-url-hover: #1a4645;
  --text-url-color: #f8bc24;
  --user-text-color: rgb(81, 153, 117);
}

/* CSS styles go here... */

.commandBlock {
  background-color: var(--main-color);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  color: var(--text-input-color);
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(115, 171, 173, 0.5),
    0 0 10px rgba(115, 171, 173, 0.5), 0 0 15px rgba(115, 171, 173, 0.5);
}

javascript css reactjs jsx

Answer 1

Answer №1

Check out the updated codesandbox link: https://codesandbox.io/s/material-demo-forked-7dsyf2?file=/demo.js

=> I've included a new state named "inputHistory" to keep track of entered commands, similar to a Terminal.

Updated JSX code:

import React, { useEffect, useRef, useState } from "react";
import styles from "./TerminalPage.module.css";

function Demo() {
  const [textInput, setTextInput] = useState("");
  // more state variables
}

export default Demo;

Here's the Updated CSS code:

:root {
  --main-text-color: #a16b56;
  /* Custom CSS properties */
}

.terminalContainer {
  margin: 10px 0 0 10px;
  /* Styling for terminal container */
}

/* More CSS styles here */

.commandBlock {
  background-color: var(--main-color);
  padding: 10px;
  border-radius: 5px;
  /* Styling for command block */
}

If you have any questions, feel free to ask.

Answer 2

Check out the updated codesandbox link: https://codesandbox.io/s/material-demo-forked-7dsyf2?file=/demo.js

=> I've included a new state named "inputHistory" to keep track of entered commands, similar to a Terminal.

Updated JSX code:

import React, { useEffect, useRef, useState } from "react";
import styles from "./TerminalPage.module.css";

function Demo() {
  const [textInput, setTextInput] = useState("");
  // more state variables
}

export default Demo;

Here's the Updated CSS code:

:root {
  --main-text-color: #a16b56;
  /* Custom CSS properties */
}

.terminalContainer {
  margin: 10px 0 0 10px;
  /* Styling for terminal container */
}

/* More CSS styles here */

.commandBlock {
  background-color: var(--main-color);
  padding: 10px;
  border-radius: 5px;
  /* Styling for command block */
}

If you have any questions, feel free to ask.

What is the best way to create a new line in React that resembles a terminal?

What technologies am I working with?

Answer №1

Similar questions

Transitioning from a material design list element to a card design

Having trouble sending a FormData object with Axios for a user uploaded file in a React, Node.JS project

Exploring methods to access the state of a component nested within a slot in Vue

Creating a 2D array in Objective-C with a variable size is simple and straightforward

No files were located in the devDependencies

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Populate two MUI-Autocomplete fields by selecting one item

Using arrow functions in a Polymer or lit-element project is a simple and efficient way to write

Converting a standard redux object into a format suitable for display

How can I make TypeScript properly export function names for closure-compiler?

The JavaScript array remains unaltered

The identifier "resolve" in the catch block has not been defined

All fields in the form are showing the same error message during validation

The Bootstrap/Angular tab list items are generated dynamically based on the API response, leading to issues with the DOM

Tool designed to analyze the timing of sub requests and methods in Node for benchmarking purposes

Verification message appears once the SQL database has provided the necessary information to the data table

The received URL from the POST request in React is now being opened

Issues with AJAX chat system functionality

Update the class of the element that is currently selected using jQuery and the `this` keyword

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards