Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @lemmon/custom-textarea with all npm packages installed. Try it out:

var customTextarea = require("@lemmon/custom-textarea")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@lemmon/custom-textarea v0.1.1

Web Components custom-textarea element.

<custom-textarea>

Web Components custom-textarea element.

Reason behind this component is to create a plain unstyled autogrowing textarea.

Demo

Install

npm i @lemmon/custom-textarea

Use Inside Your Web App

// does register the component for you
// with `custom-textarea` tagname
require('@lemmon/custom-textarea')

or

// does not register the component
// useful when you want to extend the component
// or to chose a different tag name
const Textarea = require('@lemmon/custom-textarea/element')
class TextareaUpgraded extends Textarea {}
customElements.define('upgraded-textarea', TextareaUpgraded)

Use With The CDN

<script src="https://unpkg.com/@lemmon/custom-textarea/dist/index.js"></script>

Example

<custom-textarea name="text">Hello World!</custom-textarea>

You can apply your own styles. Fonts, colors, line-height, and padding are inherited. Placeholder styles can be defined using CSS variables.

custom-textarea {
  --placeholder-color: orange; /* default: inherit */
  --placeholder-opacity: 1;    /* default: 0.5 */
}

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free