Auto expand contract textarea

expandContractTextArea.js

//calculates using newlines
//*** text area grow */
const calcNewLines = (value) => {
  let numberOfLineBreaks = (value.match(/\n/g) || []).length;
  // min-height + lines x line-height + padding + border
  //let newHeight = 34 + numberOfLineBreaks * 20 + 12 + 2;
  let newHeight = 34 + numberOfLineBreaks * 24 + 12 + 2;
  if (!numberOfLineBreaks) {
    newHeight = 36;
  }
  return newHeight;
};
const makeAreaGreatAgain = (e) => {
  e.target.style.height = calcNewLines(e.target.value) + "px";
};

style.scss

#deckcode {
  resize: none;
  height: auto;
  //width: 400px;
  //min-height: 100px;
  //padding: 5px;
  //font-size: 14px;
  overflow: hidden;
  font-size: 16px;
  //box-sizing: border-box;
  width: 100%;
  padding: 6px 6px 6px 12px;
}

.import-deck-block {
  margin-left: auto;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  //margin-left: 12px;
  //flex-grow: 1;
  width: 100%;
  margin: 12px auto;
  button {
    margin-right: 0;
    margin-left: 12px;
    color: $text-color;
    //padding-left: 12px;
    //  padding-right: 12px;
    font-weight: 700;
    text-transform: uppercase;
    img {
      pointer-events: none;
    }
  }

textarea.html

<div class="import-deck-block">
  <textarea type="text" id="deckcode" placeholder="Deck code" autofocus class="autoExpand" rows="1" data-min-rows="1"></textarea>
  <button class="icon import-deck-code" data-url="'.get_home_url().'/deck-builder">
    <img src="'.get_stylesheet_directory_uri().'/assets/media/icons/import.svg" alt="">
  </button>
</div>