↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content.

Overview

↕️ Alpine Autosize ↕️

A little Alpine.js plugin to automatically resize a textarea to fit its content.

version Build size downloads JSDelivr GitHub

🚀 Installation

CDN

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

npm install @marcreichel/alpine-autosize

Add the x-autosize directive to your project by importing the package before Alpine.js.

import Alpine from 'alpinejs';
import Autosize from '@marcreichel/alpine-autosize';

Alpine.plugin(Autosize);

window.Alpine = Alpine;
window.Alpine.start();

🪄 Usage

To let the textarea automatically resize, add the x-data and x-autosize directives to the <textarea>.

<textarea x-data x-autosize></textarea>

That's it!

📄 License

Copyright (c) 2022 Marc Reichel and contributors.

Licensed under the MIT license, see LICENSE for details.

You might also like...

Its a Advanced Content Management System built on top of Frappe.

Its a Advanced Content Management System built on top of Frappe.

Go1 CMS Go1 CMS - Its a Advanced Content Management System built on top of Frappe with Advanced Page builder. Lead your business towards the future of

Dec 29, 2022

Dynamically resize, format and optimize images based on url modifiers.

Local Image Sharp Dynamically resize, format and optimize images based on url modifiers. Table of Contents ✨ Features 🖐 Installation 🚚 Usage Contrib

Nov 29, 2022

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

Dec 7, 2022

JavaScript library to resize, reduce, or change ranges of DOM elements.

Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 input type="range" element. Usage: Include range.js

Jun 3, 2021

⏱ Simple Alpine.js plugin to display the human-readable distance between a date and now.

⏱ Alpine TimeAgo ⏱ An Alpine.js plugin to return the distance between a given date and now in words (like "3 months ago", "about 2 hours ago" or "in a

Dec 22, 2022

Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or enter your email address and more.

Demodal Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or en

Jan 4, 2023

A simple mod that researches content automatically!

A simple mod that researches content automatically!

Auto Research A simple mod that researches content automatically! Algorithm Description Looks up for avaliable tech nodes with all the objectives comp

Sep 7, 2022

Automatically reload the frontend when content changes are saved in the panel.

Kirby Reload On Save This plugin for Kirby 3 automatically reloads the frontend when content changes are saved in the panel. It uses the Broadcast Cha

Jun 7, 2023

Add focal point alignment of images to your Alpine 3.x components with a custom directive.

Alpine Focal Add focal point alignment of images to your Alpine 3.x components with a custom directive. This package only supports Alpine v3.x. About

Oct 12, 2021
Comments
  • Textarea height is not enough to hide vertical scroll

    Textarea height is not enough to hide vertical scroll

    By default textarea has a scroll, but if its height will be larger on 2px we wouldn't have that issue. Otherwise we need to add overflow-y: hidden; CSS property. Tested in on Mac.

    I've tried to add +2px to textarea height and scroll is disappearing.

    https://user-images.githubusercontent.com/1849174/189544855-4daf64fa-0966-4f27-9de4-06eacebb16b2.mov

    opened by antonkomarev 4
  • Doesn't respect textarea rows attribute

    Doesn't respect textarea rows attribute

    It seems not able to respect the existing rows value on initial due to line 8 already setting the height, https://github.com/marcreichel/alpine-autosize/blob/4abd4506cb42dc64eef2de3dd04700768872c396/src/index.js#L8-L9

    Screenshot: image

    bug 
    opened by iniznet 2
  • The CDN link in the docs is broken

    The CDN link in the docs is broken

    Nice package! I tried to use it, but couldn't get past the broken CDN link: "https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.js"

    opened by calebporzio 1
Releases(1.2.0)
  • 1.2.0(Sep 15, 2022)

    What's Changed

    • ✨ Introduce padding modifier by @marcreichel in https://github.com/marcreichel/alpine-autosize/pull/10

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.1.4...1.2.0

    Source code(tar.gz)
    Source code(zip)
  • 1.1.4(Aug 14, 2022)

    What's Changed

    • 🐛 Fixes wire:model problem by @marcreichel in https://github.com/marcreichel/alpine-autosize/pull/8

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.1.3...1.1.4

    Source code(tar.gz)
    Source code(zip)
  • 1.1.3(Mar 29, 2022)

    What's Changed

    • 🐛 Fix initial resizing by @marcreichel in https://github.com/marcreichel/alpine-autosize/pull/7

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.1.2...1.1.3

    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Mar 27, 2022)

    What's Changed

    • fix #1, problem with wire:model by @leobm in https://github.com/marcreichel/alpine-autosize/pull/6

    New Contributors

    • @leobm made their first contribution in https://github.com/marcreichel/alpine-autosize/pull/6

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.1.1...1.1.2

    Source code(tar.gz)
    Source code(zip)
  • 1.1.1(Mar 16, 2022)

    What's Changed

    • 🐛 Respect rows by @marcreichel in https://github.com/marcreichel/alpine-autosize/pull/5

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.1.0...1.1.1

    Source code(tar.gz)
    Source code(zip)
  • 1.1.0(Mar 7, 2022)

    What's Changed

    • ✨ Add minified build by @marcreichel in https://github.com/marcreichel/alpine-autosize/pull/3

    New Contributors

    • @marcreichel made their first contribution in https://github.com/marcreichel/alpine-autosize/pull/3

    Full Changelog: https://github.com/marcreichel/alpine-autosize/compare/1.0.1...1.1.0

    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Mar 5, 2022)

  • 1.0.0(Feb 13, 2022)

  • 0.1.2(Feb 13, 2022)

  • 0.1.0(Feb 13, 2022)

Owner
Marc Reichel
Hi! 👋🏼 My name is Marc. I love to code and make the web look beautiful wherever I can.
Marc Reichel
Little Alpine.js plugin to add a typewriter effect to any HTML element.

⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. ?? Installation CDN Include the following <script> tag in

Marc Reichel 58 Dec 28, 2022
Bootstrap 5 spinner/loading/pending indicator for ,