- Notifications
You must be signed in to change notification settings - Fork3
Alpine.js plugin to automatically resize a textarea to fit its content.
License
marcreichel/alpine-autosize
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A littleAlpine.js plugin to automatically resize atextarea to fit its content.
Include the following<script> tag in the<head> of your document, just before Alpine.
<scriptsrc="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.min.js"defer></script>
npm install @marcreichel/alpine-autosize
Add thex-autosize directive to your project by importing the packagebefore starting Alpine.
importAlpinefrom'alpinejs';importAutosizefrom'@marcreichel/alpine-autosize';Alpine.plugin(Autosize);Alpine.start();
To let thetextarea automatically resize, add thex-autosize directive to the<textarea>.
<textareax-autosize></textarea>
If you want to "manually" update the size of the textarea – for example after updating its content programatically – you may use the$autosize Alpine magic:
<divx-data="{ text: '' }"x-init="$watch('text', () => { $nextTick(() => { $autosize($refs.input); }); })"><textareax-ref="input"x-model="text"></textarea></div>
Just make sure, you call$autosize($refs.input) inside of a$nextTick for Alpine to update the DOM correctly.
Copyright (c) 2022 - 2023 Marc Reichel and contributors.
Licensed under the MIT license, seeLICENSE for details.
About
Alpine.js plugin to automatically resize a textarea to fit its content.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.