DEV Community

Cover image for Normal text box vs Magical text box
Lakshmanan Arumugam
Lakshmanan Arumugam

Posted on • Originally published at lakshmananarumugam.com

Normal text box vs Magical text box

Last week I faced one problem in the HTML text area. it more about the user interaction with the text area component. In, this article I am going to cover the problem and solution.

Magic text box

We all know about HTML input element and behaviour. but, In the input have one problem is inside the text box large text not able to read properly.

Example:
Alt Text

In this case in our mind comes This problem will solve replace Input element to Text area element. so, we able to read the text properly.

Yes. but, inside the text area will come small text. so the text area will fill more space without having large content.

Example:
Alt Text

Solution conclusion

Use text area with increase height based on the content. now, solved the problem in both cases.

let see the implementation part using react and typescript.

import React, { useEffect } from "react";

interface MagicTextBoxProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  defaultValue?: string;
}

const ReactMagicTextBox = (props: MagicTextBoxProps) => {
  const textAreaRef = React.createRef<HTMLTextAreaElement>();
  const [value, setValue] = React.useState(props.value);

  /* Incase text area based on the content */
  const autoAlignment = () => {
    // Using ref to get the text area element
    const node = textAreaRef?.current;

    if (node) {
      node.style.height = "auto";
      node.style.height = node.scrollHeight + "px"; // Main part of the code
    }
  };

  /* On load check and incase the height based on the content */
  useEffect(() => {
    autoAlignment();
  });

  const inputDataChange = (
    event: React.ChangeEvent<HTMLTextAreaElement>
  ): void => {
    // On change every time check the text area content and height
    autoAlignment();
    const currentValue = event.target.value;

    setValue(currentValue);

    if (props.onChange) {
      props.onChange(currentValue);
    }
  };

  return (
    <textarea
      className="input-text"
      ref={textAreaRef}
      onChange={inputDataChange}
      rows={1}
      placeholder={props.placeholder}
      value={value}
    />
  );
};

export default ReactMagicTextBox;

Enter fullscreen mode Exit fullscreen mode

That's all. This is how I solved the problem. In case you know any solution better than this. please, share the solution via a comment at the post bottom.

Refer to the below real-time example for more understanding.
Inside the textbox use large content and test it. And, see the difference.

Thanks for reading this post 🍻🍻🍻.

Please, subscribe to my blog website to get my latest blogs and project directly into your mail inbox.

Top comments (2)

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Hey, great post.
But I wanna know why you are not importing React stuff(useState, ChangeEvent, etc) instead of doing React.useState, React.ChangeEvent, etc...

Just curious to know, nothing else...

Collapse
 
lakshmananarumugam profile image
Lakshmanan Arumugam

Yes, we can do like you mentioned. I just used existing import(Not intentional). Thanks for the suggestion.