Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcreichel/alpine-autosize
Alpine.js plugin to automatically resize a textarea to fit its content.
https://github.com/marcreichel/alpine-autosize
alpine-js alpinejs autoresize autosize hacktoberfest plugin textarea textarea-autoresize
Last synced: 8 days ago
JSON representation
Alpine.js plugin to automatically resize a textarea to fit its content.
- Host: GitHub
- URL: https://github.com/marcreichel/alpine-autosize
- Owner: marcreichel
- License: mit
- Created: 2022-02-13T10:38:22.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-29T14:08:50.000Z (7 months ago)
- Last Synced: 2024-10-11T12:11:37.542Z (2 months ago)
- Topics: alpine-js, alpinejs, autoresize, autosize, hacktoberfest, plugin, textarea, textarea-autoresize
- Language: JavaScript
- Homepage:
- Size: 139 KB
- Stars: 97
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Alpine Autosize - Directive for autosizing textareas
README
↕️ Alpine Autosize ↕️
A little Alpine.js plugin to automatically resize a textarea to fit its content.
## 🚀 Installation
### CDN
Include the following `` tag in the `<head>` of your document, just before Alpine.
```html
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.min.js" defer>
```
### NPM
```shell
npm install @marcreichel/alpine-autosize
```
Add the `x-autosize` directive to your project by importing the package **before** starting Alpine.
```js
import Alpine from 'alpinejs';
import Autosize from '@marcreichel/alpine-autosize';
Alpine.plugin(Autosize);
Alpine.start();
```
## 🪄 Usage
To let the `textarea` automatically resize, add the `x-data` and `x-autosize` directives to the ``.
```html
```
## 📄 License
Copyright (c) 2022 - 2023 Marc Reichel and contributors.
Licensed under the MIT license, see [LICENSE](LICENSE) for details.