github / textarea-autosize

Autosizes textarea to size of it's contents.

Textarea Autosize

Autosizes textarea to size of its contents.

Installation

$ npm install @github/textarea-autosize

Usage

The autosizing behavior must be explicitly activated on the <textarea>.

import autosize from '@github/textarea-autosize'
autosize(document.querySelector('textarea.foo'))

Using a library like selector-observer, the behavior can automatically be applied to any textareas matching a class name.

import {observe} from 'selector-observer'
import autosize from '@github/textarea-autosize'

observe('textarea.autosize', { subscribe: autosize })

Browser support

• Chrome
• Firefox
• Safari
• Internet Explorer 11
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

textarea-autosize's Issues

Improve README

README could use some ❤️.

Sections

• Installation
• Usage
• Browser support
• Development
• License

Examples of great READMEs

• https://github.com/github/auto-check-element/blob/master/README.md
• https://github.com/github/clipboard-copy-element/blob/master/README.md
• https://github.com/github/details-dialog-element/blob/master/README.md
• https://github.com/github/details-menu-element/blob/master/README.md

Typo: `addEventListenter`

textarea-autosize/src/index.js

Line 85 in b07dd1f

textarea.addEventListenter('paste', sizeToFit)

Okay, one of my play tool just not work and I found this typo... This issue will be fixed by #30

Don't resize smaller than the current size

If a textbox is already sized generously, typing in the textarea using this library will cause it to shrink. It'd be nice if there was a way to only allow the textarea to grow if the content gets too big for the initial size.

Thanks!

What's the purpose of the `maxHeight - 100`?

textarea-autosize/src/index.js

Line 52 in 6ed45ab

textarea.style.maxHeight = `${maxHeight - 100}px`

In my project, it works well when I adjust it to maxHeight + 50 or larger. But don't know why is that happen.

Just want to know how is the maxHeight - 100 comes out.

---

Additional:

textarea-autosize/src/index.js

Lines 51 to 52 in 6ed45ab

	const maxHeight = Number(getComputedStyle(textarea).height.replace(/px/, '')) + bottom
	textarea.style.maxHeight = `${maxHeight - 100}px`

Seems this max-height setting doesn't behave well at several places in my project. Currently, I comment out the maxHeight setting codes. Everything works fine.