https://github.com/tgfjt/yo-yo-autogrow

textarea component made from yo-yo, automatically adjust height
https://github.com/tgfjt/yo-yo-autogrow

choo yo-yo

Last synced: about 1 year ago
JSON representation

textarea component made from yo-yo, automatically adjust height

• Host: GitHub
• URL: https://github.com/tgfjt/yo-yo-autogrow
• Owner: tgfjt
• Created: 2016-08-24T21:20:37.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-08-02T08:59:26.000Z (almost 9 years ago)
• Last Synced: 2025-06-28T05:52:12.278Z (about 1 year ago)
• Topics: choo, yo-yo
• Language: JavaScript
• Homepage:
• Size: 60.5 KB
• Stars: 13
• Watchers: 0
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# yo-yo-autogrow

[![Build Status](https://travis-ci.org/tgfjt/yo-yo-autogrow.svg?branch=feature%2Ftest)](https://travis-ci.org/tgfjt/yo-yo-autogrow)

[![npm](https://img.shields.io/npm/v/yo-yo-autogrow.svg?maxAge=2592000)]()

![API stability](https://img.shields.io/badge/stability-experimental-orange.svg)

![MIT Licensed](https://img.shields.io/npm/l/yo-yo-autogrow.svg)

Wrapper `` UI Component made from [yo-yo](https://github.com/maxogden/yo-yo)

![capture](capture.gif)

## Usage

```js

const autogrow = require('yo-yo-autogrow')

const el = yo`


  ${autogrow({

    required: true,

    placeholder: 'enter...'

  })}

`

```


with [Choo](https://github.com/yoshuawuyts/choo)

```js

const choo = require('choo')

const html = require('choo/html')

const autogrow = require('yo-yo-autogrow')

const app = choo()

app.model({

  state: {title: 'Sample with choo'}

})

const mainView = (state) => html`

  

    


      
${state.title}

      

        ${autogrow()}

      

    

  

`


document.body.appendChild(tree)

```

### Properties

| Property | Default |

| :-- | :-- |

| placeholder | `''` |

| value | `''` |

| name | `''` |

| disabled | `false` |

| required | `false` |

| inputmode | `''` |

| autocomplete | `'off'` |

### Style

| Property | Default |

| :-- | :-- |

| `--AutogrowTextarea-border` | `1px solid #ddd` |

| `--AutogrowTextarea-border-focus` | `1px solid #9cc` |

| `--AutogrowTextarea-width` | `100%` |

| `--AutogrowTextarea-padding` | `4px 6px` |