{"id":21192982,"url":"https://github.com/cloudfour/elastic-textarea","last_synced_at":"2025-07-13T07:02:45.265Z","repository":{"id":37957419,"uuid":"476884693","full_name":"cloudfour/elastic-textarea","owner":"cloudfour","description":"A web component for progressively-enhanced auto-expanding textareas","archived":false,"fork":false,"pushed_at":"2025-07-06T01:26:35.000Z","size":1107,"stargazers_count":35,"open_issues_count":8,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-06T02:35:32.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudfour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-01T22:26:05.000Z","updated_at":"2025-05-12T20:33:53.000Z","dependencies_parsed_at":"2023-02-14T23:31:52.691Z","dependency_job_id":"fddcd8c9-9382-4528-8e6e-144318ce917a","html_url":"https://github.com/cloudfour/elastic-textarea","commit_stats":{"total_commits":86,"total_committers":5,"mean_commits":17.2,"dds":0.2906976744186046,"last_synced_commit":"f64a8ff8f33bbc70ff341b34d22208e90d19a26f"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/cloudfour/elastic-textarea","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Felastic-textarea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Felastic-textarea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Felastic-textarea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Felastic-textarea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudfour","download_url":"https://codeload.github.com/cloudfour/elastic-textarea/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2Felastic-textarea/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265101620,"owners_count":23711579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T19:12:19.564Z","updated_at":"2025-07-13T07:02:45.259Z","avatar_url":"https://github.com/cloudfour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elastic Textarea\n\n[![NPM version](http://img.shields.io/npm/v/@cloudfour/elastic-textarea.svg)](https://www.npmjs.org/package/@cloudfour/elastic-textarea) [![Build Status](https://github.com/cloudfour/elastic-textarea/workflows/CI/badge.svg)](https://github.com/cloudfour/elastic-textarea/actions?query=workflow%3ACI) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)\n\n\n_A web component for progressively-enhanced auto-expanding textareas._\n\nThis web component progressively enhances the native textarea: as a user types in the textarea, its height increases so that its content is never clipped. When the user deletes content in the textarea it shrinks back down to a minimum number of rows.\n\n![A gif of an textarea expanding and shrinking as a user types and deletes content.](/elastic-textarea.gif)\n\n(Note: if a user manually resizes a textarea it will no longer be elastic.)\n\n## Installation\n\n### NPM\n\nYou can install via npm:\n\n```zsh\nnpm i @cloudfour/elastic-textarea\n```\n\nThen you'll need to import the component code:\n\n```js\nimport \"@cloudfour/elastic-textarea\";\n```\n\n### CDN\n\nAlternately, you can load the script via CDN:\n\n```html\n\u003cscript\n  type=\"module\"\n  src=\"https://unpkg.com/@cloudfour/elastic-textarea/index.min.js\"\n\u003e\u003c/script\u003e\n```\n\n## Usage\n\nOnce the JavaScript has been loaded, you can use `elastic-textarea` in your HTML.\n\n`elastic-textarea` is meant to wrap one or more `textarea` elements. This ensures that before the JS loads and runs, the textarea is still usable.\n\n```html\n\u003celastic-textarea\u003e\n  \u003clabel\u003e\n    Textarea 1\n    \u003ctextarea name=\"textarea-1\"\u003e\u003c/textarea\u003e\n  \u003c/label\u003e\n\u003c/elastic-textarea\u003e\n```\n\nIf multiple `textarea` elements are wrapped in an `elastic-textarea` they will all be initialized. This allows you to easily wrap an entire form or page and enhance all the textareas within:\n\n```html\n\u003celastic-textarea\u003e\n  \u003clabel\u003e\n    Textarea 1\n    \u003ctextarea name=\"textarea-1\"\u003e\u003c/textarea\u003e\n  \u003c/label\u003e\n  \u003clabel\u003e\n    Textarea 2\n    \u003ctextarea name=\"textarea-2\"\u003e\u003c/textarea\u003e\n  \u003c/label\u003e\n\u003c/elastic-textarea\u003e\n```\n\n## CSS-Only Alternative\n\nYou may consider using `field-sizing: content` as a CSS-only alternate solution. [MDN says](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing) \"`field-sizing: content` overrides the default preferred sizing of form elements. This setting provides an easy way to configure text inputs to shrinkwrap their content and grow as more text is entered.\" As of May 2025, this is [only supported in Chromium browsers](https://caniuse.com/mdn-css_properties_field-sizing_content), but it's worth considering as a progressive enhancement if you don't need full cross-browser support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Felastic-textarea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudfour%2Felastic-textarea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Felastic-textarea/lists"}