# solid-textarea-autosize

> textarea component for Solid which grows with content

Latest version **0.0.5** (published 2023-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-textarea-autosize
pnpm add solid-textarea-autosize
yarn add solid-textarea-autosize
bun add solid-textarea-autosize
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-01-14 |
| First published | 2023-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Andrey Popp |
| Maintainers | bigmistqke |
| Keywords | solid |

## Links

- npm: https://www.npmjs.com/package/solid-textarea-autosize
- Repository: https://github.com/bigmistqke/solid-textarea-autosize
- Homepage: https://github.com/bigmistqke/solid-textarea-autosize#readme
- Issues: https://github.com/bigmistqke/solid-textarea-autosize/issues
- npm.io page: https://npm.io/package/solid-textarea-autosize

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2023-01-14
- 0.0.4 — 2023-01-09
- 0.0.3 — 2023-01-09
- 0.0.2 — 2023-01-09
- 0.0.1 — 2023-01-08
- 0.0.0 — 2023-01-08

## README

[![npm version](https://img.shields.io/npm/v/solid-textarea-autosize.svg)](https://www.npmjs.com/package/solid-textarea-autosize)
[![npm](https://img.shields.io/npm/dm/solid-textarea-autosize.svg)](https://www.npmjs.com/package/solid-textarea-autosize)

# solid-textarea-autosize

A port of [react-textarea-autosize](https://github.com/Andarist/react-textarea-autosize)

Drop-in replacement for the textarea component which automatically resizes
textarea as content changes. A native solid version of the popular
[jQuery Autosize](http://www.jacklmoore.com/autosize/)! Weighs
around <span class="weight">1.3KB</span> (minified & gzipped).

This module supports IE9 and above.

```javascript
import TextareaAutosize from "solid-textarea-autosize";

// If you use CommonJS syntax:
// var TextareaAutosize = require('solid-textarea-autosize').default;

render(
  () => (
    <div>
      <TextareaAutosize />
    </div>
  ),
  document.getElementById("element"),
);
```

## Install

`npm install solid-textarea-autosize`

## Demo

https://bigmistqke.github.io/solid-textarea-autosize/

## Props

### Special props:

| prop                | type      | description                                                                                                                                                                                                                                        |
| ------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `maxRows`           | `number`  | Maximum number of rows up to which the textarea can grow                                                                                                                                                                                           |
| `minRows`           | `number`  | Minimum number of rows to show for textarea                                                                                                                                                                                                        |
| `onHeightChange`    | `func`    | Function invoked on textarea height change, with height as first argument. The second function argument is an object containing additional information that might be useful for custom behaviors. Current options include `{ rowHeight: number }`. |
| `cacheMeasurements` | `boolean` | Reuse previously computed measurements when computing height of textarea. Default: `false`                                                                                                                                                         |

Apart from these, the component accepts all props that are accepted by `<textarea/>`, like `style`, `onChange`, `value`, etc, with the exception of textarea's `row`-attribute and the style-properties `height`, `min-height` and `max-height`.

## FAQ

### How to focus

Get a ref to inner textarea:

```js
<TextareaAutosize ref={(tag) => (textarea = tag)} />
```

And then call a focus on that ref:

```js
this.textarea.focus();
```

To autofocus:

```js
<TextareaAutosize autoFocus />
```

(all HTML attributes are passed to inner textarea)

---
_Source: https://npm.io/package/solid-textarea-autosize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._