@ivanhanak_com/js-textarea-autogrow

    1.0.2 • Public • Published

    Lightweight JS library for autogrowing <textarea />

    NPM Weekly Downloads

    Lightweight (>0,1kb) javascript library to auto-grow your <textarea /> on user input.

    Changelog

    See the whole Changelog.

    Install

    Using npm:

    npm install @ivanhanak_com/js-textarea-autogrow

    Using yarn:

    yarn add @ivanhanak_com/js-textarea-autogrow

    Usage in vanilla js

    import autoGrow, {initializeTextAreaAutoGrow} from '@ivanhanak_com/js-textarea-autogrow';
    const textArea = document.getElementById("my-textarea");
    
    textArea.addEventListener("input", e => {
        autoGrow(textArea);
    });
    autoGrow(textArea);
    
    
    //or let the library take care of attaching onInput event
    initializeTextAreaAutoGrow(textArea);

    Usage in react

    Controlled component example

    import React, {Component} from 'react'; //sorry for classes guys :D
    
    //with controlled component
    class App extends Component {
    
      fieldRef = null;
    
      componentDidMount() {
        autoGrow(this.fieldRef);
      }
    
      componentDidUpdate(prevProps, prevState) {
        if(prevProps.value !== this.props.value) {
          autoGrow(this.fieldRef);
        }
      }
    
      render() {
        return (
            <textarea onChange={this.props.onChange} value={this.props.value} ref={ref => this.fieldRef = ref} />
        );
      }
    }

    Uncontrolled component example

    class App extends Component {
    
      fieldRef = null;
    
      componentDidMount() {
        initializeTextAreaAutoGrow(this.fieldRef);
      }
    
      render() {
        return (
            <textarea ref={ref => this.fieldRef = ref} />
        );
      }
    }

    Browser support

    IE5+ 🙂

    Install

    npm i @ivanhanak_com/js-textarea-autogrow

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    https://www.imdb.com/title/tt0097742/

    Unpacked Size

    4.07 kB

    Total Files

    7

    Last publish

    Collaborators

    • ivanhanak_com