0

In my reactjs application, I have an input element which contains text, and I want to have the number of lines of text inside this element, so that whenever the number of lines exceed 3, I show a Load More button. And, the problem is that the size of the input elements differs in different devices. So, the problem is that I don't know how to have the number of lines inside the this element to show the load more button. Can anybody help me with this? I really appreciate.

Saba
  • 376
  • 5
  • 19
  • You should show some code. – Marc Oct 26 '20 at 19:51
  • 1
    Please provide [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). We can't help since we don't know how the lines work within the component, for example, is it responsive and the lines change based on the width? – kyle Oct 26 '20 at 19:52
  • 1
    You could set a line-height of your textarea and then divide it with your textareas scrollheight. – faerin Oct 26 '20 at 19:52
  • @kyle yes, the lines change based on the width – Saba Oct 26 '20 at 20:04
  • Would you please provide an example of how to do that ? @entiendoNull – Saba Oct 26 '20 at 20:05
  • Check this out... use a `useRef` in your React component to get the DOM reference of your textarea. https://stackoverflow.com/questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript/1761203#1761203 – faerin Oct 27 '20 at 08:25

0 Answers0