Enhancing the input field in React with a custom wrapper and dynamic height adjustment

Question

Enhancing the input field in React with a custom wrapper and dynamic height adjustment

I'm attempting to create an input component that wraps the text and increases in height with each new line, similar to how it works on desktop Facebook. When you select someone, open the message box, and start typing, the input grows larger with each additional line of text.

Currently, I am using a textarea for this purpose: <Input />

const Input = styled.textarea`
  border: 0;
  outline: none;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  width: 100%;
  overflow-wrap: break-word;
  height: 24px;
`;

Once I have entered 5 lines of text, I want a scroll bar to appear. How can I achieve this?

html css reactjs styled-components

Answer 1

Answer №1

If you don't necessarily need a textarea, you can achieve the desired functionality using the contenteditable attribute. Simply apply it to a <div> element and set a maximum height for the scrollbar to appear:

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

<div class="demo" contenteditable></div>

If a textarea is required, then utilizing a script to handle resizing is necessary. There are various effective methods outlined here: CSS Tricks: Auto growing inputs and textareas

edit For illustration purposes, here's an example in React using the contentEditable attribute (camelCase for React JSX) along with a placeholder. The placeholder is incorporated using a pseudo element:

const ContentEditable = ({ placeholder }) => (
  <div class="demo" contentEditable="true" placeholder={placeholder}></div>
);

ReactDOM.render(
  <ContentEditable placeholder="Type something..." />, document.getElementById("react")
);

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #555;
  pointer-events: none;
  display: block;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

If you don't necessarily need a textarea, you can achieve the desired functionality using the contenteditable attribute. Simply apply it to a <div> element and set a maximum height for the scrollbar to appear:

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

<div class="demo" contenteditable></div>

If a textarea is required, then utilizing a script to handle resizing is necessary. There are various effective methods outlined here: CSS Tricks: Auto growing inputs and textareas

edit For illustration purposes, here's an example in React using the contentEditable attribute (camelCase for React JSX) along with a placeholder. The placeholder is incorporated using a pseudo element:

const ContentEditable = ({ placeholder }) => (
  <div class="demo" contentEditable="true" placeholder={placeholder}></div>
);

ReactDOM.render(
  <ContentEditable placeholder="Type something..." />, document.getElementById("react")
);

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #555;
  pointer-events: none;
  display: block;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Enhancing the input field in React with a custom wrapper and dynamic height adjustment

Answer №1

Similar questions

What was the purpose of acquiring knowledge in mongoose js?

Simple inquiry: PHP and HTML formatting essentials

Changing Bootstrap variables within a React application: A step-by-step guide

Is the audio playback in React Native unsuccessful because of an error in decoding the audio?

What is the process of turning a picture from a menu file into a clickable link?

Create a search bar using HTML and CSS that utilizes the GET method

Restricting Options in jQuery/ajax选择列表

Error: Reading the property 'any' of an undefined object resulted in a TypeError after an update operation

Is Vue the next contender against React Native and Flutter?

The transparency of the image remains slightly see-through even after adjusting the opacity value

Welcome to the interactive homepage featuring multitouch authentication

Creating an Angular form that adapts to changing input values

Creating a new state by merging the data from two existing states in Next.js

Incorporating Auth0 into the MERN technology stack

CSS technique for adjustable column width in HTML tables

Utilizing jQuery for easy drag-and-drop functionality in web development

Aligning elements next to each other in html / css without using any top margins

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

PHP code to display or conceal tables

Modifying the initial state values in Redux Form is prohibited