@moxy/grow-element-fn

1.0.6 • Public • Published

grow-element-fn

Update textarea height to its content with lines number customization.

Demo: link

GitHub: link

NPM: link

Summary

Library to auto-grow and auto-shrink textarea to fit its content. Works perfect with vertical scrollbar.

Recomended textarea styles:
word-wrap: break-word;
white-space: pre-line;
line-height: 30px; // should be defined

Install via NPM

npm install --save grow-element-fn

Browser compatibility

Chrome Firefox IE EDGE Safari iOS Safari Android Opera Mini Windows Phone IE
yes 57 10 + ? ? + ? ?

Usage

import growElementFn from 'grow-element-fn';
const textarea = document.getElementById("my-textarea");

function growTextarea() {
  growElementFn({
    el: textarea,
    minLines: 1,
    maxLines: 4,
    extraLine: true,
  });
}

growTextarea();
textarea.addEventListener('focus', growTextarea);
textarea.addEventListener('blur', growTextarea);
textarea.addEventListener('input', growTextarea);

Options:

el (Element, required): reference to DOM element.

minLines (Number = 1): minimum lines of textarea.

maxLines (Number = 0): maximum lines of textarea to display no scrollbar. If maxLines is 0 textarea won't have maximum lines limit.

extraLine (boolean = false): add extra line in the bottom of textarea. Usefull to remove content jumping on slow devices.

License: MIT

Package Sidebar

Install

npm i @moxy/grow-element-fn

Weekly Downloads

0

Version

1.0.6

License

MIT

Unpacked Size

18.6 kB

Total Files

18

Last publish

Collaborators

  • tiagodinis
  • moxyhq
  • filipediasf
  • satazor
  • marcooliveira
  • acostalima
  • andregoncalvesdev