With just a few lines of code, textarea starts resizing automatically
based on the length of the input text. Magic 🪄
Demo
Try adding few extra new lines to textarea below:
Installation
# npm
npm install @frsource/autoresize-textarea
# Yarn
yarn add @frsource/autoresize-textarea
Modern JS / Typescript demo
<textarea row="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend commodo interdum. Donec tincidunt consequat semper. Nulla id magna viverra, egestas est sit amet, lacinia felis. Donec ut mauris nunc. Vivamus ex sem, tempor ac felis ut, congue laoreet lectus. Etiam urna augue, iaculis in metus eu, pharetra lobortis tortor.</textarea>
<script>
import { attach } from "@frsource/autoresize-textarea";
const textarea = document.querySelector("textarea");
const { detach } = attach(textarea);
// detach plugin whenever you want (e.g. on component unmount)
// detach();
</script>
UMD code demo
<textarea row="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend commodo interdum. Donec tincidunt consequat semper. Nulla id magna viverra, egestas est sit amet, lacinia felis. Donec ut mauris nunc. Vivamus ex sem, tempor ac felis ut, congue laoreet lectus. Etiam urna augue, iaculis in metus eu, pharetra lobortis tortor.</textarea>
<script>
const textarea = document.querySelector("textarea");
const { detach } = window.autoresizeTextarea.attach(textarea);
// detach plugin whenever you want (e.g. on component unmount)
// detach();
</script>