A little Alpine.js plugin to automatically resize a textarea to fit its content.
Include the following <script> tag in the <head> of your document, just before Alpine.
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.min.js" defer></script>npm install @marcreichel/alpine-autosizeAdd the x-autosize directive to your project by importing the package before starting Alpine.
import Alpine from 'alpinejs';
import Autosize from '@marcreichel/alpine-autosize';
Alpine.plugin(Autosize);
Alpine.start();To let the textarea automatically resize, add the x-data and x-autosize directives to the <textarea>.
<textarea x-data x-autosize></textarea>To add additional height to the textarea - which might be necessary in some occasions - you can do so using the
"padding" modifier like so (only px values are supported):
<textarea x-data x-autosize.10px></textarea>This adds additional 10px to the textarea height. You can provide any integer which best suits your needs.
Copyright (c) 2022 Marc Reichel and contributors.
Licensed under the MIT license, see LICENSE for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent